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Sketch+Xcode 移 动 U| 与 
交互 动 效 设计 从 入 门 到 精通 


从 安装 和 启动 两 个 软件 开始 ， 真 正 做 到 零 基础 也 可 以 轻松 入 门 。 

用 于 UI 设 计 的 Sketch 软件 和 演示 运行 效果 的 Xcode 软 件 结合 使 用 ， 给 读者 交互 体验 。 
通过 案例 讲解 各 种 工具 的 具体 使 用 和 操作 ， 使 学 习 变 得 更 加 简单 。 

加 入 UI 设计 的 基础 理论 知识 ， 创 新 章节 编排 ， 让 设计 变 得 更 加 高 效 。 

总 结 iOS 系 统 和 Android 系 统 界面 及 图 标的 最 新 设计 规范 和 尺寸 。 

从 绘制 线 框图 开始 ， 到 导出 和 交付 开发 商 使 用 的 文件 结束 ， 全 面 展示 UI 设 计 流 程 。 
同时 讲述 PC 端 和 移动 端的 UI 设 计 ， 使 UI 设 计 配 套 ， 符 合 国际 化 流行 趋势 。 

讲述 极 简 主 义 和 扁 平 化 设计 的 概念 ， 全 书 案例 以 扁平 化 风格 为 主 ， 引 领 时 尚 设计 风范 。 
本 书 配套 案例 素材 、 源 文件 、 教 学 视频 和 PPT 课 件 等 立体 化 教学 资源 ， 方 便 读者 学 习 。 
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内 容 简 介 


本 书 通过 大 量 的 案例 分 析 ， 详 细 介 绍 了 在 UI 设计 中 Sketch 47.1 的 使 用 方法 ， 分 别针 对 使 用 Sketch 绘制 
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国 PREFACE 前 言 


本 书 共 分 9 章 ， 从 UI 设计 必修 课 开 始 ， 逐 步 讲解 了 Sketch 界面 、 使 用 Sketch 绘制 线 框图 、 
设计 图 标 、 绘 制 按钮 、 制 作 移动 端 界 面 、 制 作 PC 端 网 页 、UI 的 输出 与 交互 设计 及 使 用 Xcode。 
除了 讲解 Sketch 和 Xcode 的 使 用 方法 外 ， 还 穿插 了 UI 设计 的 理论 知识 ， 如 图 标 设计 流程 、 图 
标 属性 、 移 动 界面 中 的 色彩 运用 、 网 站 常见 设计 风格 等 ， 提 供 了 原型 设计 的 方法 、 图 标 及 界面 设 
计 规 范 、 网 页 布局 原则 、iOS 及 Android 图 标 和 界面 的 设计 规范 与 尺寸 等 UI 设计 及 应 用 中 的 核 
心 内 容 。 

通过 本 书 的 学 习 ， 读 者 不 但 可 以 使 用 Sketch 设计 出 漂亮 的 图 标 、 流 行 的 界面 ， 还 能 通过 
Xcode 制作 出 UI 的 运行 效果 。 从 了 解 什么 是 UI 开始 ， 到 最 终 的 交互 体验 ， 以 及 UI 设计 中 不 可 
忽略 的 行业 知识 ， 读 者 将 从 本 书 中 获得 全 面 丰富 的 UI 设计 内 容 及 轻松 的 学 习 体验 。 


本 书 结构 


第 1 章 UI 入 门 必修 课 

本 章 主要 讲解 了 UI、UE 和 ID 的 基本 概念 ,使 读者 了 解 什么 是 UI 及 UI、UE 和 |D 的 区 别 和 联系 ， 
讲述 了 用 户 体验 的 一 般 设 计 流程 、iOS 和 Android 的 设计 特色 、 移 动 UI 的 基本 常识 和 网 页 UI 的 
基本 常识 。 

第 2 章 初 识 Sketch 

本 章 从 介绍 Sketch 软件 开始 ， 讲 述 了 Sketch 的 界面 、Sketch 的 设计 优势 、Sketch 的 安装 
与 启动 ， 通 过 制作 Apple Watch 界面 和 iPhone 跳 转 页 面 ， 讲 解 如 何 插入 形状 和 图 片 ， 使 读者 体 
验 Sketch 易于 操作 的 特点 。 

第 3 章 ， 使 用 Sketch 绘制 线 框图 

本 章 以 绘制 线 框 原 图 贯穿 始终 ， 从 Sketch 文件 的 新 建 和 保存 ， 到 插入 文字 、 设 置 文字 参数 、 
插入 形状 、 在 检查 器 中 调整 形状 及 图 层 的 基本 应 用 。 

第 4 章 使 用 Sketch 设计 图 标 

图 标的 绘制 是 UI 设计 中 最 为 重要 的 一 个 环节 ， 一 个 好 的 图 标 ， 需 要 有 指 代 性 、 识 别 性 和 审美 
性 。 本 章 不 仅 详细 阐述 了 图 标的 绘制 过 程 ， 介 绍 了 缩放 工具 、 使 用 参考 线 和 网 格 、 使 用 检查 器 、 
调整 锚 点 和 曲线 的 方法 ， 还 讲述 了 UI 图 标的 分 类 、 图 标的 更 换 方法 、 绘 制 流程 和 图 标 属性 等 理念 
与 实际 相 结 合 的 知识 。 

第 5 章 按钮 设计 

本 章 对 UI 设计 中 的 按钮 进行 了 详细 、 有 具体 的 讲解 ， 阐 明了 按钮 设计 在 UI 中 的 地 位 和 重要 作 
用 , 介绍 了 按钮 设计 的 知识 和 规范 , 通过 一 组 播放 器 按钮 和 一 组 质感 按钮 的 绘制 , 详细 介绍 了 渐变 、 
阴影 、 内 阴影 、 模 糊 等 工具 在 设计 中 的 应 用 。 

第 6 章 移动 端 界 面 设计 

本 章 以 第 3 章 的 两 个 线 框图 为 基础 ， 在 实际 操作 中 讲述 了 APP 界面 设计 ， 通 过 修改 颜色 、 样 
式 、 文 字 等 参数 ， 完 成 APP 界面 设计 的 制作 。 

第 7 章 PC 端 网 页 界面 设计 

本 章 结合 前 面 章 节 讲解 的 内 容 ， 使 用 Sketch 的 各 种 工具 完成 PC 端 网 页 的 制作 ， 讲 解 了 PC 
端 网 页 设计 的 方法 、PC 端 和 移动 端 网 页 设计 的 区 别 、 扁 平 化 设计 在 UI 设计 中 的 应 用 和 网 站 常见 
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设计 风格 等 内 容 ， 对 使 用 Sketch 进行 UI 设计 是 一 个 概括 。 

第 8 章 UI 的 输出 与 交互 设计 

本 章 通过 “导出 APP 应 用 图 标 ”“ 导 出 移动 端 APP 界面 ”“ 为 网 页 划分 切片 ”和 “导出 
点 九 切 图 ”等 案例 ， 讲 解 了 Sketch 文件 的 输出 、 适 配 分 辨 率 、 分 享 设计 稿 、 移 动 交互 设计 事项 
等 必要 的 理论 知识 ， 帮 助 读者 完成 和 归纳 Sketch 应 用 与 UI 设计 的 最 后 环节 。 

第 9 章 使 用 Xcode 制作 交互 效果 

本 章 讲解 了 如 何 安装 并 启动 Xcode 软件 ， 介 绍 了 Xcode 的 界面 和 主要 功能 ， 演 示 了 
Xcode 的 基本 操作 , 讲解 了 如 何 使 用 Xcode 编辑 从 Sketch 中 导出 的 图 片 , 通过 编辑 和 使 用 控件 、 
导入 素材 等 一 系列 操作 ， 最 终 实现 模拟 运行 效果 的 过 程 。 


本 书 特点 


本 书 以 案例 带动 知识 面 的 方式 ， 以 案例 为 主 ， 详 细 介绍 并 演示 各 种 工具 的 使 用 方法 并 细 化 操 
作 步 骤 ， 使 读者 通过 案例 的 学 习 ， 在 实践 中 熟练 掌握 Sketch 的 使 用 方法 。 

本 书 从 布局 上 分 为 实战 案例 、 操 作 指 南 、 通 关 必 读 、 知 识 链接 、 提 示 和 技巧 6 个 主要 部 分 。 
每 一 个 实战 案例 都 讲解 了 实际 工作 中 一 个 Sketch 作品 的 制作 过 程 ， 步 又 讲解 具体 ， 过 程 讲解 清 
晰 且 完 善 ， 通 俗 易 懂 。 

本 书 的 “操作 指南 ”是 在 UI 设计 过 程 中 对 常用 的 、 典 型 的 工具 及 方法 的 具体 讲解 和 分 析 ， 
能 够 使 读者 掌握 重点 。 本 书 的 “知识 链接 ”是 对 实际 Ul 设计 过 程 中 的 方法 及 软件 功能 进行 具体 
分 析 及 理论 性 讲解 。 本 书 的 “通关 必 读 ”中 讲解 了 UI 设计 的 基础 常识 、 设 计 理 念 及 设计 规范 ， 
读者 可 以 学 习 和 人 参考， 以 掌握 UI 设计 中 必 不 可 少 的 理论 知识 。 而 通过 “提示 ”和 “技巧 ”， 读 
者 可 以 在 UI 设计 过 程 中 学 习 到 更 简捷 、 更 有 效率 的 技巧 和 方法 。 

本 书 最 后 介绍 了 Xcode 的 使 用 ，Xcode 和 Sketch 一 样 是 iOS 系统 的 独霸 软件 。Xcode 
是 运行 在 操作 系统 Mac OS X 上 的 集成 开发 工具 ， 在 此 着 重 讲解 了 Xcode 移动 端 UI 设计 常用 
的 控件 和 功能 ， 使 读者 能 够 通过 Xcode 看 到 移动 UI 设计 最 终 的 演示 效果 和 交互 体验 。 

编写 本 书 的 目的 在 于 讲解 如 何 使 用 Sketch 软件 和 使 用 Xcode 运行 交互 效果 ， 使 读者 了 
解 UI 设计 的 基础 常识 和 必要 知识 。 本 书 语言 简洁 、 描 述 细致 且 全 面 ， 使 读者 能 够 轻松 地 学 会 
Sketch 的 操作 ， 了 解 图 标 和 界面 的 绘制 过 程 ， 在 UI 的 学 习 中 起 到 事半功倍 的 效果 。 由 于 互联 网 
的 更 新 较 快 ， 书 中 所 提供 的 网 址 仅 供 参 考 。 

本 书 由 张 晓 景 编著 ， 李 晓 斌 、 高 鹏 、 胡 敏 敏 、 杨 帆 、 杨 阳 、 张 国 勇 、 贾 勇 、 刘 钊 、 魏 华 、 林 秋 、 
夏 志 利 、 胡 伟 军 、 董 亮 等 也 参与 了 本 书 的 编写 工作 。 由 于 作者 水 平 所 限 ， 书 中 难免 有 疏 漏 和 不 足 
之 处 ， 奶 请 广大 读者 批评 、 指 正 。 

本 书 提供 了 书 中 案例 的 源 文 件 、 素 材 文件 、 教 学 视频 和 PPT 教学 课件 等 资源 ， 扫 一 扫 下 方 
的 二 维 码 ， 推 送 到 自己 的 邮箱 后 即 可 下 载 获取 。 
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Ul 即 User Interface 的 简称 ， 泛 指 用 户 的 操作 界面 。 对 于 网 页 设 
计 来 说 ， 包 含 移动 端 界 面 设计 、PC 端 界面 设计 和 智能 穿戴 等 。U|I 设 
计 主 要 是 指 对 界面 的 样式 进行 设计 。 用 户 界面 设计 的 三 大 原则 是 : 叶 置 
界面 于 用 户 的 控制 之 下 ; (2 减少 用 户 的 记忆 负担 ; (3 保持 界面 的 一 致 性 。 
而 在 使 用 上 ， 软 件 的 人 机 交互 、 操 作 逻辑 、 界 面 美观 的 整体 设计 则 是 同 
样 重要 的 课题 。 

本 书 在 讲解 Sketch 的 使 用 之 前 ， 首 先 介绍 什么 是 UI 及 UI 设计 。 
通过 本 章 的 学 习 ， 读 者 可 以 对 UI 设计 的 概念 和 基础 理论 知识 有 充分 的 
了 解 。 


本 章 知识 点 
Ul、 UE 和 ID elh 
用 户 体验 的 一 般 设计 流程 
iOS 和 Android 的 设计 特色 
移动 UI 的 基本 常识 
网 页 UI 的 基本 常识 





简单 地 讲 ，UI 设计 即 通过 如 文字 、 按 钮 、 文 本 框 和 颜色 等 界面 元 素 的 绘制 、 选 取 和 编辑 ， 使 





用 ， 并 在 与 界面 的 交互 过 程 中 觉得 更 简单 高 效 。 
然而 目的 是 简单 的 ， 要 完成 这 个 目的 ， 必 须要 有 一 个 各 司 其 职 的 
图 1-1 所 示 。 








其 成 为 一 个 界面 整体 ， 并 能 让 用 户 在 界面 上 完成 一 项 操作 ， 最 终 达 到 的 效果 是 让 用 户 觉得 易 懂 、 


团队 和 一 个 系统 的 流程 ， 如 


移动 互联 网 之 路 一 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 





1.1.1 UI( 用 户 界面 ) 


UI(User Interface, 用 户 界面 ) 其 实 是 一 个 比较 广泛 的 概念 , 是 指 人 和 机 器 互动 过 程 中 的 界面 ， 
从 心理 学 意义 上 来 划分 ， 界 面 可 分 为 感觉 ( 视觉 、 触 觉 、 听 觉 等 ) 和 情感 两 个 层次 。U| 设计 是 屏 
幕 产品 的 重要 组 成 部 分 ， 是 一 个 复杂 的 由 不 同学 科 参 与 的 工程 ， 认 知心 理学 、 设 计 学 、 语 言 学 等 
在 此 都 扮演 着 重要 的 角色 。 现在 一 般 所 说 的 UI 设计 师 , 是 指 GUI 设计 师 ， 也 就 是 图 形 界面 设计 师 ， 
主要 负责 产品 的 图 形 图 标 等 界面 元 素 的 设计 和 界面 整体 的 色彩 搭配 等 。 

界面 元 素 包 括 但 不 仅 限于 以 下 内 容 。 

输入 控件 : 按钮 、 文 本 框 、 选 取 框 、 单 选 按钮 、 下 拉 列 表 、 列 表 框 、 开 关 按 钮 。 

导航 控件 : 面包 屑 导航 、 滑 块 、 搜 索 栏 、 分 页 、 标 签 、 图 标 。 

信息 控件 : 文本 提示 框 、 图 标 、 进 度 条 、 提 示 、 消 息 框 、 模 式 窗口 。 


1.1.2 UE( 用 户 体验 ) 


UE(User Experience， 用 户 体验 )， 更 多 关注 的 是 用 户 的 行为 习惯 和 心理 感受 ， 即 研究 用 户 
怎样 使 用 产品 才能 够 更 加 得 心 应 手 。 

现在 流行 的 设计 过 程 注重 以 用 户 为 中 心 。 用 户 体验 的 概念 从 开发 的 最 早期 就 开始 进入 整个 流 
程 ， 并 贯穿 始终 。 其 目的 就 是 保证 对 用 户 体验 有 正确 的 预 估 ， 认 识 用 户 的 真实 期 望 和 目的 ， 在 核 
心 功能 还 能 够 以 低廉 成 本 加 以 修改 时 对 设计 进行 修正 ， 以 及 保证 核心 功能 与 人 机 界面 之 间 的 协调 
工作 ， 减 少 漏洞 。 


1.1.3 1D( 交互 设计 ) 


ID(Interaction Design， 交 互 设计 ) 简单 地 讲 就 是 指 人 与 计算 机 等 智能 设备 之 间 互 动 过 程 的 
流畅 性 设计 ， 一 般 由 软件 工程 师 来 实施 。 

交互 设计 通过 了 解 人 的 心理 、 目 标 和 期 望 ， 使 用 有 效 的 交互 方式 让 整个 过 程 可 用 、 易 用 。 交 
互 设计 的 主要 对 象 是 人 机 界面 , 但 不 仅 限 于 图 形 界 面 。 为 了 达到 目标 , 交互 设计 师 需要 关注 心理 学 、 
人 机 工程 学 等 许多 方面 的 内 容 。 


关于 流程 ， 要 注意 设计 流程 的 目标 在 于 保证 “无 论 谁 来 做 这 个 产品 的 设计 ， 都 能 达到 80 分 ”。 
100 分 的 完美 作品 ， 很 有 可 能 没有 遵循 流程 ， 而 是 天 才 融 合 了 创新 、 传 承 和 执行 力 的 作品 。 流程” 
只 有 与 环境 相 匹 配 才 能 够 带 来 正面 的 作用 。 


1.2.1 原型 


设计 的 第 一 个 阶段 ， 我 们 称 为 原型 设计 ， 主 要 是 设计 产品 的 功能 、 用 户 流程 、 信 息 架构 、 交 
互 细节 、 页 面 元 素 等 。 也 可 以 简单 地 理解 为 原型 设计 ， 就 是 完全 不 管 产 品 画 得 美 不 美 观 ， 只 把 它 
要 做 的 事情 和 怎么 做 这 些 事情 考虑 清楚 , 把 它 怎 么 和 用 户 交互 考虑 清楚 , 而 且 把 所 有 这 些 都 画 出 来 ， 
让 人 可 以 直观 地 看 到 ， 如 图 1-2 所 示 。 
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画 原型 的 方法 有 很 多 种 ， 可 以 用 纸 笔 ， 也 可 以 用 绘图 软件 ， 总 之 无 论 使 用 
什么 方法 ， 只 要 把 需要 的 内 容 事 无 巨细 地 在 原型 中 表达 出 来 即 可 。 





在 原型 的 交付 中 ， 最 重要 也 最 常见 的 就 是 线 框图 ， 在 第 3 章 中 将 对 线 框图 的 理论 知识 和 绘制 
方法 进行 详细 介绍 。 此 外 ， 还 需要 牢记 ， 原 型 就 是 用 来 让 人 修改 的 ， 它 存在 的 价值 就 体现 在 被 修 
改 了 几 次 、 被 更 新 了 几 次 ， 以 及 它 的 下 一 步 被 少 改 了 几 次 。 


1.2.2 ”模型 


在 原型 被 大 家 接受 以 后 ， 就 要 关心 产品 的 外 部 特征 ， 我 们 以 “模型 ”这 个 词 来 统称 该 步骤 的 
交付 物 。 和 原型 相 比 ， 它 关注 产品 的 视觉 设计 ， 包 括 色彩 、 风 格 、 图 标 、 插 图 等 。 

要 清楚 的 是 , 这 不 是 一 步 由 “美工 "来 “美化 ”的 工作 。 视 觉 设 计 师 需 要 对 原型 设计 有 深刻 的 理解 ， 
对 交互 设计 和 尚未 进行 的 HTML、CSS 和 JavaScript 的 代码 都 要 有 充分 的 了 解 。 如 果 不 能 从 全 
局 的 角度 来 进行 视觉 设计 ， 则 对 产品 本 身 没有 任何 有 价值 的 帮助 。 

例如 ， 通 过 原型 ， 大 家 一 致 认为 页 面 中 A 元 素 比 B 元 素 重要 ， 那 么 视觉 设计 师 的 脑海 中 就 要 
有 十 七 八 种 可 以 表现 A 元 素 比 B 元 素 重 要 的 视觉 语言 可 供 选择 ， 这 是 对 设计 原型 的 视觉 设计 师 最 
基本 的 要 求 ， 如 图 1-3 所 示 。 














图 1-3 
更 高 的 要 求 才 是 视觉 设计 的 原始 功能 ， 到 底 使 用 什么 设计 风格 ? ”“ 这 个 按钮 使 用 什么 颜色 ? ” 
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等 。 这 类 的 思考 和 选择 , 应 该 着 眼 于 产品 的 品质 、 品牌 等 , 在 各 种 企业 、 各 种 产品 间 保 持 一 定 的 统一 ， 
可 以 在 用 户 心里 打下 视觉 的 烙印 。 

有 些 问题 用 交互 设计 是 很 难 解决 的 ， 这 时 就 需要 一 个 有 创造 力 的 视觉 设计 师 ， 可 以 从 视觉 设 
计 的 角度 来 创造 性 地 解决 问题 。 


1.2.3 ”演示 版 


演示 版 就 是 按照 原型 和 模型 使 用 HTML、CSS、JavaScript 等 前 端 技术 将 网 站 展现 出 来 ， 以 
便 后 端的 开发 工程 师 可 以 接手 功能 的 开发 。 这 个 过 程 比较 复杂 ， 个 人 认为 前 端 开发 在 很 大 程度 上 
是 对 用 户 体验 的 提升 和 保证 ， 开 发 只 是 它 的 一 种 形式 和 手段 。 


1.2.4 中间 步骤 


中 间 步 骤 是 指 用户 研 究 过程 。 在 各 个 阶段 的 前 后 ， 可 以 根据 具体 情况 选择 是 否 投入 精力 在 用 
户 研究 上 。 用 户 研究 的 形式 也 很 自由 ， 可 以 采用 多 种 方式 对 用 户 进行 调研 ， 听 取 用 户 的 意见 。 关 
键 是 ， 用 户 研究 的 结果 如 何 表现 到 产品 上 ， 如 何 采 纳 少数 用 户 的 意见 来 服务 所 有 的 用 户 。 


移动 UI 设计 师 和 其 他 设计 师 不 同 ， 设 计 的 最 终 效果 会 受 很 多 客观 因素 的 影响 ， 如 不 同 平台 的 
差异 会 对 设计 产生 一 些 影响 。 

iOS 和 Android 是 现在 移动 互联 网 上 主流 的 两 个 平台 。 如 图 1-4 所 示 为 iOS 和 Android 
系统 界面 ， 在 设计 的 过 程 中 ， 因 为 这 两 个 平台 的 不 同 特性 ， 往 往 需要 角色 切换 ， 不 断 地 换 位 
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1.3.1 iOS 的 设计 特色 


无 论 是 重新 设计 旧 的 应 用 程序 或 创建 一 个 新 的 应 用 程序 ， 都 可 以 考虑 用 以 下 这 种 方式 来 完成 
工作 。 首 先 ， 去 除 UI 元 素 让 应 用 的 核心 功能 凸显 出 来 ， 并 明确 之 间 的 相关 性 。 其 次 ， 使 用 iOS 
的 主题 来 定义 UI 并 进行 用 户 体 验 设计 。 完 善 细节 设计 ， 并 加 以 适当 合理 的 修饰 。 最 后 ， 保 证 设计 
的 UI 可 以 适 配 各 种 设备 和 各 种 操作 模式 ， 使 得 用 户 在 不 同 场景 下 都 可 以 使 用 。 
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》 1. 关注 内 容 


尽管 清新 美观 的 UI 和 流畅 的 动态 效果 都 是 iOS 体验 的 亮点 ， 但 内 容 始终 是 iOS 的 核心 。 通 
过 以 下 几 种 方式 可 以 确保 设计 不 仅 能 够 提升 功能 体验 ， 而 且 可 以 关注 内 容 本 身 。 

1) 充分 利用 整个 屏幕 

系统 天 气 应 用 是 个 绝 佳 范例 ， 用 漂亮 的 全 屏 天 气 图 片 呈现 现在 的 天 气 情 况 ， 直 观 地 向 用 户 传 
递 最 重要 的 信息 ， 同 时 也 留 出 空间 呈现 每 个 时 段 的 天 气 数据 ， 如 图 1-5 所 示 。 





通过 iOS 系统 的 天 气 
界面 可 以 看 出 ， 全 屏 显 
示 带 给 用 户 的 震撼 力 远 
比 窗口 界面 要 大 得 多 ， 
不 仅 体现 出 内 容 主体 ， 
而 且 还 兼顾 了 美观 性 。 





图 1-5 
2) 用 半 透 明 UI 元 素 样式 来 暗示 背后 的 内 容 
半 透 明 的 控件 元 素 可 以 提供 上 下 文 的 使 用 场景 ， 帮 助 用 户 看 到 更 多 可 用 的 内 容 ， 并 可 以 起 到 
短暂 的 提示 作用 ， 如 图 1-6 所 示 。 


提 示 


在 iOS 系统 中 ， 半 透明 的 控件 元 素 只 让 它 庶 挡住 的 地 方 变 得 模糊 ， 看 上 去 
Pes 像 蒙 着 一 层 薄 纸 一 样 ， 但 它 并 没有 遮挡 屏幕 剩余 的 部 分 。 





通过 iOS 系统 的 下 拉 
菜单 和 上 划 菜 单 可 以 体 
现 出 其 设计 特色 ， 模 糊 
背景 和 暗 化 背景 能 够 更 
加 突出 主题 文字 。 





3) 运用 扁平 化 设计 风格 

遮 重 、 渐 变 和 阴影 效果 的 运用 会 加 重 Ul 元素 的 显示 效果 ， 从 而 影响 对 内 容 的 关注 。 相 反 的 ， 
应 该 以 内 容 为 核心 ， 扁 平 化 风格 的 运用 让 用 户 界面 成 为 内 容 的 支撑 ， 如 图 1-7 所 示 。 

有》 2. 保证 清晰 

确保 应 用 始终 是 以 内 容 为 核心 的 另 一 种 方法 是 保证 清晰 度 。 下 面 有 几 种 方法 可 以 让 重要 的 内 
容 和 功能 清晰 可 见 ， 并 且 易 于 交互 。 
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大 色 块 和 扁平 化 的 通过 iOS 系统 的 就 究 
运用 ， 减 少 了 图 标 和 健康 数据 界面 ， 可 以 
对 文字 内 容 的 影响 ， 清楚 地 看 出 扁平 化 风格 
突出 了 主题 内 容 。 设计 的 运用 。 

1) 使 用 大 量 留 白 


留 白 不 仅 可 以 使 重要 的 内 容 和 功能 更 加 醒目 、 更 易 理 解 ， 还 可 以 传达 一 种 平静 和 安宁 的 心理 
感受 ， 它 可 以 使 一 个 应 用 看 起 来 更 加 聚焦 和 高 效 ， 如 图 1-8 所 示 。 

2) 让 颜色 简化 UI 

内 置 的 应 用 使 用 同系 列 的 系统 颜色 ， 这 样 一 来 ， 无 论 在 深 色 或 浅 色 背景 上 看 起 来 都 很 干净 、 
很 纯粹 ， 如 图 1-9 所 示 。 














< Go , 
通过 短信 和 界面 可 以 EBD| % 7 四 | 将 重点 文字 高 亮 标 出 ， 
清楚 地 看 出 ， 大 量 om 中 人 全 了 了 能 够 起 到 突出 的 作用 ， 
留 白 能 够 更 加 突出 “| 。。、。 | a a & ga a | 整体 颜色 统一 ， 能 够 减 
主题 文字 , 让 用 户 | ” Ee 少 界面 突 元 的 感觉。 
聚焦 文字 。 区 
图 1-8 图 1-9 


使 用 一 种 主题 色 ， 例 如 ， 日 历 中 使 用 红色 ， 将 重要 区 块 的 信息 高 亮 标 出 ， 
并 巧妙 地 用 样式 暗示 可 交互 性 ， 也 让 应 用 有 了 一 致 的 视觉 主题 。 





3) 通过 使 用 系统 字体 确保 易 读 性 
iOS 的 系统 字体 使 用 动态 类 型 来 自动 调整 字 间 距 和 行 间距 ， 使 文字 在 任何 尺寸 大 小 下 都 能 清 
晰 易 读 ， 如 图 1-10 所 示 。 


提 示 
无 论 用 户 是 使 用 系统 字体 还 是 自 定义 字体 , 一 定 要 采用 动态 类 型 。 这样 一 来 ， 
Bs 当 用 户 选择 不 同 字体 尺寸 时 ， 系 统 的 应 用 才 可 以 及 时 做 出 响应 。 





4) 使 用 无 边框 的 按钮 
在 默认 情况 下 ， 所 有 菜单 栏 上 的 按钮 都 是 无 边框 的 。 在 内 容 区 域 中 ， 通 过 文案 、 颜 色 及 操作 
指引 标题 来 表明 该 无 边框 按钮 的 可 交互 性 。 当 它 被 激活 时 ， 按 钮 可 以 显示 较 容 的 边框 或 浅 色 的 背 
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景 作为 操作 响应 ， 如 图 1-11 所 示 。 
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》 3. 深度 层次 

iOS 经 常 在 不 同 的 视图 层级 上 展现 内 容 ， 用 深度 层次 来 进行 交流 ， 不 但 可 以 表达 层次 结构 和 
位 置 ， 而 且 可 以 帮助 用 户 了 解 屏幕 上 对 象 之 间 的 关系 。 
[IE 对 于 支持 3D 触 控 的 设备 ， 轻 压 、 重 压 ， 以 及 快捷 操作 能 让 用 户 在 不 离开 当前 界面 的 情景 
下 预览 其 他 重要 内 容 ， 如 图 1-12 所 示 。 
通过 使 用 一 个 在 主屏 幕 上 方 的 半 透 明 背景 浮 层 ， 文 件 夹 就 能 清楚 地 把 内 容 和 屏幕 上 的 其 他 
内 容 区 分 开 ， 如 图 1-13 所 示 。 


大 限度 地 节约 屏幕 的 空 
间 , 同时 便于 用 户 查 找 。 


全 面 ， 尤 其 是 多 任 
务 的 处 理 。 


十 

在 进行 交互 设计 上， 

时 ， 要 着 用 记 才 上 有 0 文件 夹 的 使 用 ， 能 够 最 
2 
09. 





图 1-13 
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[GBS 通过 不 同 的 层级 来 展示 内 容 ， 例 如 ， 用 户 在 使 用 备忘录 的 某 个 条 目 时 ， 其 他 的 选项 就 会 被 
集中 收 起 在 屏幕 的 下 方 ， 如 图 1-14 所 示 。 

GBS 具有 较 深层 次 的 应 用 还 包括 日 历 ， 例 如 ， 当 用 户 在 翻阅 年 、 月 、 日 时 ， 增 强 的 转 场 动画 效 
果 给 用 户 一 种 层级 纵深 感 。 在 滚动 年 份 视图 时 ， 用 户 可 以 即时 看 到 今天 的 日 期 及 其 他 日 历任 务 ， 
如 图 1-15 所 示 。 

当 用 户 选 择 了 某 个 月 份 ， 年 份 视图 会 局 部 放大 该 月 份 ， 过 渡 到 月 份 视图 。 今 天 的 日 期 依然 
处 于 高 亮 状态 ， 年 份 会 显示 在 返回 按钮 处 ， 这 样 用 户 可 以 清楚 地 知道 它们 在 哪里 ， 它 们 从 哪里 进 
来 以 及 如 何 返回 ， 如 图 1-16 所 示 。 

类 似 的 过 渡 动 画 也 出 现在 用 户 选择 某 个 日 期 时 ， 月 份 视图 从 所 选 位 置 分 开 ， 将 所 在 的 周 日 
期 推 向 内 容 区 顶端 并 显示 以 小 时 为 单位 的 当天 时 间 轴 视图 。 这 些 交 互动 画 增强 了 年 、 月 和 日 之 间 
的 导入 不 条 姑 用 站 的 居 滞 ， 如 图 1-17 所 示 。 
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1.3.2 Android 的 设计 特色 


在 设计 Android 界面 之 前 ， 首 先 要 了 解 Android UI 的 设计 特色 ， 在 整个 设计 过 程 中 应 当 考 
虑 将 这 些 准 则 应 用 在 自己 的 创意 和 设计 思想 中 。 除 非 有 其 他 特殊 的 目的 ， 否 则 尽量 不 要 偏离 。 

》 1. 漂亮 的 界面 

无 论 UI 界面 设计 如 何 发 展 ， 美 观 始终 是 吸引 用 户 的 首要 条 件 。 在 Android UI 设计 中 ， 可 以 
通过 以 下 几 点 来 实现 。 

1) 惊喜 

漂亮 的 界面 ， 精 心 设计 的 动画 或 悦耳 的 音效 都 能 给 用 户 带 来 愉快 的 体验 。 精 工 细作 有 助 于 提 
高 易 用 性 和 增强 掌控 强大 功能 的 感觉 ， 如 图 1-18 所 示 。 

2) 真实 的 对 象 比 菜单 和 按钮 更 有 趣 

让 人 们 直接 触摸 和 操控 应 用 中 的 对 象 ， 这 样 可 以 降低 完成 任务 时 的 认 知 难度 ， 并 且 使 得 操作 
更 加 入 性 化 ， 如 图 1-19 所 示 。 

3) 展现 个 性 

人 们 喜欢 个 性 化 ， 因 为 这 样 可 以 使 其 感受 到 自在 和 掌控 力 。 提 供 一 个 合理 而 漂亮 的 默认 样式 ， 
同时 在 不 喧 宾 夺 主 的 前 提 下 尽 可 能 提供 有 趣 的 个 性 化 功能 。 
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界面 的 美观 与 否 直 接 图 标的 扁平 化 容 下 
影响 用 户 的 体验 感 ， 造成 理解 误 险 ， 因 
良好 的 界面 才能 吸引 在 制作 图 标 时 ， 

户 尽量 贴近 现实 ， 减 




















少 出 错 的 概率 。 





》 2. 便捷 的 操作 

近 几 年 手机 行业 发 展 迅猛 ， 手 机 的 功能 也 在 逐渐 强大 ， 便 捷 的 操作 就 显得 越 来 越 重要 ， 为 了 
使 用 户 更 快 地 适应 手机 操作 ， 需 要 通过 以 下 几 点 来 简化 界面 。 

1) 了 解 用 户 

逐渐 认识 人 们 的 偏好 ， 而 不 是 询问 并 让 他 们 一 遍 又 一 遍地 做 出 相同 的 选择 。 将 之 前 的 选择 放 
在 明显 的 地 方 。 

2) 保持 简洁 

使 用 简洁 的 短 句 。 人 们 总 是 会 忽略 元 长 的 句子 ， 如 图 1-20 所 示 。 

3) 展示 用 户 所 需要 

人 们 在 同时 看 到 许多 选择 时 就 会 手足 无 措 。 分 解 任务 和 信息 ， 使 它们 更 容易 理解 。 将 当前 不 
重要 的 选项 隐藏 起 来 ， 并 让 人 们 慢 慢 学 习 ， 如 图 1-21 所 示 。 




































































手机 界面 由 于 其 特殊 | 
特有 幕 中 会 让 用 户 无 所 

性 ， 多 数 用 户 不 希望 : 分 
和 适 从 ， 如 果 将 其 分 

在 提示 中 看 到 过 多 的 生生 系 纲 月 砷 强加 从 - 诈 - 中 时 二 站 三 
Ce 便 ， 关 健 目 全 卫 所 有 相关 功能 旦 》 条 显示 ， 在 一 定 程 

文字 ， 言 简 意 凡 反 而 ee 

更 符合 用 户 心理 。 人 

图 1-20 图 1-21 

4) 用 户 了 解 现在 在 哪里 

让 人 们 有 信心 了 解 现在 的 位 置 ， 进 行 耗 时 的 任务 时 提供 必要 的 反馈 ， 如 图 1-22 所 示 。 

5) 一 图 胜 干 言 

尽量 使 用 图 片 去 解释 想法 ， 图 片 可 以 吸引 人 们 的 注意 并 且 更 容易 理解 ， 如 图 1-23 所 示 。 

6) 实时 帮助 用 户 











首先 尝试 猜测 并 做 出 决定 ， 而 不 是 询问 用 户 。 太 多 的 选择 和 决定 使 人 们 感到 厌烦。 但 是 万 一 
青 错 了， 人 允许 “撤销 ”操作 。 
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通过 图 标 、 按 钮 或 者 
















































































提示 告知 用 户 现在 所 图 片 在 大 多 数 情况 
位 定 程 下 比 文 字 更 具有 吸 
处 的 位 置 ， 在 一 定 程 - 岗 
度 上 可 以 缓解 用 户 焦 引力 ， 为 界面 选择 
躁 的 心理 。 图 片 时 需要 下 功夫 。 
图 1-22 图 1-23 
7) 不 弄 丢 用 户 信息 


确保 用 户 创造 的 内 容 被 良好 地 保存 起 来 ， 并 可 以 随时 随地 获取 。 记 住 设置 和 保存 个 性 化 信息 ， 
并 在 手机 、 平 板 和 计算 机 之 间 同 步 ， 确 保 应 用 升级 后 不 会 给 用 户 带 来 任何 损失 。 

8) 只 在 重要 时 刻 打 断 用 户 

就 像 一 个 优秀 的 个 人 助理 ， 帮 助人 们 摆脱 不 重要 的 事情 。 人 们 需要 专心 致 志 ， 只 有 在 遇 到 紧 
急 情 况 或 者 具有 时 效 性 的 事情 时 可 以 打 断 他 们 。 


》 3. 完善 的 工作 流程 

工作 流程 简单 ， 操 作 便捷 ， 可 以 使 用 户 学 习 使 用 新 软件 的 时 间 变 短 ， 同 时 获取 用 户 所 需 的 信 
息 时 间 也 就 越 短 ， 主 要 有 以 下 几 种 方法 。 

1) 提醒 用 户 小 技巧 

当 人 们 自己 想 明白 事情 时 ， 会 感觉 很 好 。 通 过 使 用 其 他 Android 应 用 已 有 的 视觉 模式 和 通用 
的 方法 ， 让 用 户 更 容易 学 习 ， 如 图 1-24 所 示 。 

2) 委婉 提示 错误 

当 应 用 提示 人 们 做 出 改正 时 ， 要 保持 耐心 ， 如 图 1-25 所 示 。 人 们 在 使 用 应 用 时 总 是 觉得 自 
己 很 聪明 。 















































很 多 手机 界面 技巧 


无 法 让 用 户 全 部 接 控 耻 党 次 肿 5 米 用 


委婉 的 话语 ， 会 让 




















受 ， 因 此 ， 在 后 续 
方便 用 户 学 习 。 交互 感 。 
图 1-24 图 1-25 

3) 帮助 用 户 完成 复杂 的 事 


帮助 新 手 完成 “不 可 能 的 任务 ”， 让 用 户 有 专家 的 感觉 。 例 如 ， 通 过 几 个 步骤 就 能 将 几 种 照 
片 特效 结合 起 来 ， 使 得 摄影 新 手 也 能 创作 出 精美 的 照片 。 
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4) 简捷 操作 
不 是 所 有 的 操作 都 一 样 重要 。 先 决定 应 用 中 最 重要 的 功能 是 什么 ， 并 且 使 它 容易 使 用 、 反 应 
迅速 。 例 如 ， 相 机 的 快门 和 音乐 播放 器 的 暂停 按钮 。 

















在 前 面 的 知识 中 , 介绍 了 移动 UI 的 发 展 、 移动 UI 设计 师 的 工作 流程 以 及 不 同 平台 的 设计 特色 ， 
相信 大 家 对 移动 UI 设计 的 基本 概念 已 经 有 所 了 解 ， 在 正式 开始 移动 UI 的 设计 之 前 ， 先 给 大 家 介 
绍 一 些 基本 常识 。 


1.4.1 移动 UI 设计 中 用 到 的 单位 


在 移动 UI 设计 中 ， 用 户 经 常会 接触 到 的 单位 有 5 种 : in、px、pt、dp 和 sp， 很 多 人 对 这 5 
种 单位 分 辨 不 清楚 ， 在 此 做 一 下 简单 的 介绍 。 


Bi.in 

in 是 指 英寸 ， 就 是 日 常生 活 中 常 说 的 长 度 单 位 ， 如 4in 手机 屏幕 、10in 平板 电脑 及 42in 液 
晶 显 示 屏 等 。 英 寸 是 指 屏幕 对 角 的 长 度 ， 如 图 1-26 所 示 。 

3》2. px 

px 是 指 像素 ， 是 位 图 的 基本 单位 ， 经 常 在 描述 屏幕 分 辨 率 时 使 用 该 单位 。1px 代表 一 个 像素 ， 
我 们 通常 所 说 的 iPhone 7 的 分 辨 率 为 750 x 1334px， 则 表示 在 该 手机 屏幕 上 ， 水 平方 向 每 行 有 
750 个 像素 点 ， 垂 直方 向 每 列 有 1334 个 像素 点 ， 如 图 1-27 所 示 。 





























》3.pt 

pt 是 指 磅 ， 是 专用 的 印刷 单位 ， 大 小 为 1/72in， 是 一 个 长 度 单位 。 在 iOS 开发 中 ， 特 别 是 文 
字 ， 经 常 使 用 该 单位 。 

pt 和 px 之 间 有 个 换算 单位 , 在 PPI 为 72 时 , 1pt=1px; 而 PPI 为 144 时 , 1pt=2px。 也 就 是 说 ， 
当 我 们 使 用 750 x 1334px 的 尺寸 进行 设计 ， 把 标注 的 文字 尺寸 给 开发 人 员 时 ， 一 般 开发 人 员 会 
用 除 以 2 的 数值 。 

D4.dp 

dp 也 称 为 dpi， 就 是 设备 独立 像素 ， 在 Android 设备 的 开发 中 使 用 较 多 。 以 PPI 为 160 
的 屏幕 为 标准 ，1dp=1px，dp 和 px 的 换算 公式 为 dp x (ppi/160) =px。 当 PPI 为 320 时 ， 
1dp=2px。 
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》5. sp 

sp 是 指 可 缩放 独立 像素 ,谷歌 官方 推荐 文字 使 用 该 单位 , 非 文 字 使 用 dp 单位 。sp 和 dp 类 似 ， 
但 是 不 同 的 是 ，Android 系统 中 可 以 设置 文字 大 小 ， 如 果 使 用 sp 单位 进行 开发 ， 则 文字 大 小 会 随 
着 系统 文字 大 小 改变 ， 而 使 用 dp 则 不 会 有 任何 变化 。 

以 上 这 些 基 本 单位 是 构成 UI 设计 最 基本 的 前 提 之 一 ， 要 想 真 正 理解 ， 最 好 的 办 法 便 是 不 断 地 
实践 ， 大 家 可 以 在 设计 后 将 界面 导入 手机 查看 ， 以 便 加 深 理解 。 

如 果 对 单位 换算 异常 头疼 的 用 户 ， 可 以 尝试 下 设计 软件 Sketch， 它 拥有 强大 的 插件 支持 ， 会 
自动 进行 换算 ， 让 单位 的 问题 变 得 异常 简单 。 


1.4.2 iOS 的 界面 设计 规范 

相信 iOS 用 户 已 经 对 内 置 应 用 的 外 观 和 行为 非常 熟悉 ， 下 面 将 介绍 iOS 的 界面 设计 规范 ， 有 
助 于 进行 标准 的 产品 设计 。 

》1.iOS 的 界面 设计 尺寸 

界面 尺寸 是 完成 界面 设计 的 前 提 ， 只 有 清楚 地 了 解 不 同 设备 的 设计 尺寸 ， 才 能 设计 出 符合 产 
品 标准 的 应 用 ，iOS 界面 设计 规范 如 图 1-28 所 示 。 


设计 尺寸: 











iPhone X iPhone 6+,6st7+H8+ iPhone 6.6s78 iPhone 5.5s5c5e 
375x812px 414x736px 375x667px 320x568px 


图 1-28 
3》2.iOS 设计 元 素 尺寸 
不 同 设备 的 界面 尺寸 不 同 ， 其 设计 元 素 的 大 小 也 就 各 不 相同 ， 如 表 1-1 所 示 。 


A | 
ET ET 
iPhone X 1125 x 2436 60 
iPhone 8 Plus 1080x 1920 60 132 147 
iPhone 8 750 x 1334 40 88 98 
iPhone 7 Plus 1080 x 1920 60 132 147 
iPhone 7 750 x 1334 40 88 98 
iPhone 6s Plus 1080x 1920 60 132 147 
iPhone 6s 750 x 1334 40 88 98 
iPhone 6 750x 1334 40 88 98 
iPhone 5/5c/5s © 640x1136 40 88 98 
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从 手机 的 设计 尺寸 上 来 说 ,iPhone 1、iPhone 2、iPhone 3 为 @1x, iPhone 4、iPhone 
4s、iPhone 5、iPhone 5c、iPhone 5s、iPhone 6/6s/7/8 为 @2x，iPhone 6/6s/7/8 Plus 和 
iPhone X 为 @3x。 

现在 有 很 多 游戏 ， 按 照 768 x 1136px 的 像素 尺寸 来 设计 场景 ， 可 以 同时 兼容 iPad 和 
iPhone， 并 只 使 用 一 份 图 稿 。iPhone 8 的 分 辩 率 是 750 x 1334px，iPhone 8 Plus 的 分 辩 率 是 
1080 x 1920px，UI 设计 人 员 设 计 的 图 稿 并 没有 变化 ，iPhone 8 沿用 二 倍 图 (@2x)。 


在 设计 iPhone 8 尺寸 时 ， 需 要 再 切 一 个 @3x 给 开发 人 员 去 做 适 配 。 例 
Pes 如 ， 一 个 @2x 的 素材 大 小 为 44 x 44px， 那 么 相应 的 @3x 大 小 分 辩 率 为 
66x66px。 


》3. iOS 界面 图 标尺 十 
在 iOS 应 用 中 ， 图 标 可 作为 动作 执行 的 视觉 表现 ， 下 面 简单 向 用 户 介绍 不 同 设备 的 界面 图 标 
尺寸 , 如 表 1-2 所 示 。 
表 1-2 


ey | | Spotlight 标签 工具 栏 和 导 
| |App storelpx a 由 /px 主屏 幕 /px | 搜索 /px 航 栏 /px 


iPhone 8 Plus 1024x1024 180x180 144x144 87x87 75x75 66x66 


iPhone 8 1024x1024 120x120 144x144 58x58 75x75 44x44 
iPhone 7 Plus 1024x1024 180x180 144x144 87x87 75x75 66x66 
iPhone 7 1024x1024 120x120 144x144 58x58 75x75 44x44 
iPhone 6 Plus 1024x1024 180x180 144x144 87x87 75x75 66x66 
iPhone 6 1024x1024 120x120 144x144 58x58 75x75 44x44 


iPhone 5/5c/5s 1024x1024 120x120 144x144 58x58 75x75 44x44 
iPad 3/4/Air/Air2 1024x1024 180x180 144x144 100x100 50x50 44x44 
图 标 最 好 为 矢量 图 ， 放 大 1.5 倍 不 变形 。 所 有 能 点 击 的 图 片 不 得 小 于 44px。 非 矢量 素材 就 可 
以 做 尺寸 最 大 的 ， 之 后 再 进行 缩小 。 
3》 4.iOS 界面 文本 尺寸 
Apple 为 全 平台 设计 了 San Francisco 字 体 , 以 提供 一 种 优雅 的 、 一 致 的 排版 方式 和 阅读 体验 ， 
在 现 阶 段 的 iOS 11 及 未 来 的 版 本 中 ，San Francisco 是 系统 字体 。 


”San Francisco 有 两 类 尺寸 ,分 别 为 文本 (Text) 模式 和 展示 (Display) 模 式 。 
文本 模式 适用 于 小 于 20 点 (points) 的 尺寸 ， 展 示 模式 适用 于 大 于 20 点 的 
尺寸 。 





当 用 户 在 APP 中 使 用 San Francisco 时, iOS 在 适当 的 时 机 会 自动 在 文本 模式 和 展示 模式 中 切换 。 
文本 模式 和 展示 模式 在 不 同 字号 下 的 间距 值 分 别 如 图 1-29 和 图 1-30 所 示 。 
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@2x (144 PPI 下 字号 字 和 间距 


@2x (144 PPI) 下 字号 字 间 距 
了 训 20 19 
be bd 22 16 

28 13 
2 9 32 12 

36 11 
15 36 0 
1 本 64 3 
了 
5 80 以 及 以 上 0 

图 1-29 图 1-30 


一 个 视觉 舒适 的 APP 界面 ， 字 号 大 小 对 比 要 合适 ， 并 且 各 个 不 同 界面 大 小 对 比 要 统一 ， 其 各 
个 元 素 中 的 文本 大 小 有 以 下 几 种 。 
导航 栏 标题 : 34 ~ 42px， 如 今 标题 越 来 越 小 ，34px 或 36px 比较 合适 。 
标签 栏 文字 : 20 ~ 24px。iOS 自 带 应 用 都 是 20px。 
正文 : 28 ~ 36px， 正 文 样 式 在 大 字号 下 使 用 34px 字体 大 小 ， 最 小 也 不 应 小 于 22px。 
在 一 般 情 况 下 ， 每 一 档 文字 大 小 设置 的 字体 大 小 和 行 间距 的 差异 是 2px。 为 了 区 分 标题 
和 正文 字体 大 小 ， 差 异 至 少 为 4px。 
息 “标题 和 正文 样式 要 使 用 一 样 的 字体 ， 为 了 将 其 和 正文 样式 区 分 ， 标 题 样式 使 用 中 等 效果 。 


1.4.3 Android 的 界面 设计 规范 


在 设计 Android 界面 时 ， 首 先 要 对 Android 界面 的 元 素 有 一 定 的 了 解 和 认识 ， 才 能 够 有 助 于 
标准 的 产品 设计 。 

》1. Android 界面 图 标 设计 尺寸 

由 于 Android 系统 涉及 的 手机 种 类 非常 多 ， 所 以 屏幕 尺寸 很 难 统一 ， 根 据 屏幕 尺寸 的 不 同 ， 
相应 的 界面 元 素 尺寸 如 表 1-3 所 示 。 


表 1-3 
EE 

320x480 48x48 32x32 16x16 24x24 不 小 于 2 
480x800 72x72 48x48 24x 24 36x36 不 小 于 3 
480x 854 

540 x 960 

720x1280 48x48 32x32 16x16 24x24 不 小 于 2 
1080x1920 144x144 96x96 48x48 72x72 不 小 于 6 


在 设计 图 标 时 ， 对 于 5 种 主流 的 像素 密度 (MDPI、HDPI、XHDPI、XXHDPI 和 XXXH- 
DPI) 应 按照 2 : 3 : 4 : 6 : 8 的 比例 进行 缩放 。 

例如 ， 一 个 启动 图 标的 尺寸 为 48 x 48dp， 表 示 在 MDPI 的 屏幕 上 其 实际 尺寸 应 为 48 x 48px， 
在 HDPI 的 屏幕 上 其 实际 尺寸 是 MDPI 的 1.5 倍 (72x72px)， 在 XDPI 的 屏幕 上 其 实际 尺寸 是 
MDPI 的 2 倍 (96 x 96px)， 以 此 类 推 。 
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不 


虽然 Android 也 支持 低 像素 密度 (LDPI) 的 屏幕 ， 但 无 须 为 此 担心 ， 系 统 会 
Bs 自动 将 HDPI 尺寸 的 图 标 缩小 到 1/2 进行 匹配 。 


》 2. Android 界面 基本 元 素 规范 
Android 的 APP 界面 和 iPhone 的 基本 相同 ， 其 包括 状态 栏 、 导 航 栏 、 主 菜单 栏 及 中 间 的 内 
容 区 域 。 由 于 Android 的 界面 尺寸 较 多 ， 下 面 就 以 1082 x 1920px 的 尺寸 设计 为 标准 ， 简 单 介 绍 
其 界面 基本 组 成 元 素 的 设计 尺寸 ， 如 图 1-31 所 示 。 





不 同 操作 系统 基本 ， 由 二 现在 手机 的 屏 和 分 
a 辩 率 逐渐 提高 ， 低 分 辨 
元 素 组 成 的 尺寸 也 : x 人。 
率 的 手机 逐步 被 淘汰 
不 相同 ， 需 要 根据 Sa pte 
实际 情况 进行 调整 。 4 am 因此 ， 用 该 尺 
进行 介绍 。 
图 1-31 
》3. Android 文本 规范 
在 Android 系统 中 ,Droid Sans 是 默认 字体 ， SYeMiero Dam 
与 微软 雅 黑 字体 很 接近 。 为 不 同 控件 引入 字体 大 小 Text Size Small 14sp 
上 的 反差 有 助 于 营造 有 序 、 易 懂 的 排版 效果 。 但 在 , , 

Text Size Med s 
同一 个 界面 中 使 用 过 多 不 同 的 字体 大 小 则 会 造成 混 “ 
乱 。Android 设计 框架 使 用 以 下 有 限 的 几 种 字体 大 ”Text Slze Large 22sp 
小 ， 如 图 1-32 所 示 。 图 1-32 


用 户 可 以 在 “设置 ”选项 中 调整 整个 系统 的 字 
体 大 小 。 为 了 支持 这 些 辅助 特性 ， 字 体 的 像素 设计 与 字体 大 小 是 无 关 的 ， 称 为 sp。 排 版 时 也 应 当 
考虑 到 这 些 设置 。 经 过 调查 显示 ， 用 户 可 接受 的 字体 大 小 如 表 1-4 所 示 。 





表 1-4 
分 辨 率 /px 可 接受 下 线 /px 偏 小 值 /px 舒适 值 /px 
(80% 用 户 可 接受 ) (50% 以 上 用 户 认为 偏 小 ) (用户 认为 最 舒适 ) 

Android 高 分 辩 率 ”长 文本 21 24 27 
(480 x 800) 短文 本 21 24 27 

注释 18 18 2 
Android 低 分 辩 率 ”长 文本 14 16 18~20 
(320 x 480) 短文 本 14 14 18 

注释 过 4 14~16 
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》 4. 为 触 控 而 设计 

在 本 章 开 始 的 部 分 介绍 移动 UI 界面 发 展 时 ， 用 户 应 该 清晰 感受 到 移动 UI 的 设计 受 硬件 的 
响 很 大 ， 本 书 之 后 所 有 讨论 的 移动 UI 设计 均 是 为 触 屏 设备 而 设计 的 。 这 便 要 求 用 户 设计 的 界面 
仅 是 可 点 击 的 ， 而 且 应 是 非常 容易 点 击 的 。 

一 般 来 说 ， 我 们 在 设计 一 个 按钮 或 者 一 个 可 点 击 范围 时 ， 点 击 区 域 应 在 40px 以 上 ， 一 个 比 
合适 的 尺寸 是 59px。 若 可 和 触 控 区 域 低 于 医 到 
40px， 手 指 大 于 触 控 区 域 ， 很 可 能 会 发 生 
误 触 情况 ， 如 图 1-33 所 示 。 

移动 UI 设计 的 一 个 重要 特点 便 是 多 分 
辨 率 的 适 配 。 从 iOS 8 开始 苹果 便 提倡 使 
用 自 适 应 布局 。 

这 就 要 求 我 们 对 自 适应 布局 及 响应 式 
设计 等 知识 稍 做 了 解 。iOS10 系统 主 界面 
在 iPhone 5 和 iPhone 8 上 的 显示 效果 首 1 


分 别 如 图 1-34 和 图 1-35 所 示 。 5 了 
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经 过 科研 人 员 对 大 量 数据 的 研究 ， 得 出 “最 小 40px” 的 概念 ， 即 在 Mac 
Retina 设备 上 , 可 点 击 的 范围 应 低 于 40px 即 20pt。 否则 就 是 难以 点 击 到 的 S 

Bos 但 随 着 手机 屏幕 越 来 越 大 ， 分 辨 率 的 不 断 提升 ， 现 在 已 经 将 该 数值 提升 到 
30pt。 



























































根据 左右 两 个 界 理 
手机 界面 由 于 其 特殊 es 
性 ， 多 数 用 户 不 希望 不同 ， 
在 提示 中 看 到 过 多 的 本 nt 
文字 ， 言 简 意 凡 反 而 界面 示 大 / 

发 生变 化 ， 同 时 通 





更 符合 用 户 心 理 。 





过 调整 图 标 间距 ， 
使 界面 实现 自 适 应 。 









































在 iPhone 8 Plus 上 ， 一 些 应 用 程序 开始 支持 横 屏 模式 。 在 iOS 中 ， 横 屏 模式 不 是 简单 地 从 
坚 屏 到 横 屏 的 切换 ， 而 是 有 非常 强 的 逻辑 性 的 板块 的 切换 及 布局 。 如 图 1-36 所 示 为 系统 自 带 的 
天 气 应 用 的 界面 分 别 在 竖 屏 模式 和 横 屏 模式 的 展示 效果 。 
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横 屏 模式 打开 天 气 APP， 
气温 显示 会 被 放 在 右上 角 ， 
显示 的 天 气 内 容 也 更 加 全 
面 ， 如 之 前 要 向 下 滑动 才 
会 显示 的 日 出 /日 落 时 间 、 
降雨 概率 、 湿 度 等 信息 可 
以 直接 显示 在 屏幕 右 侧 。 





图 1-36 
从 iPhone 6s 开始 ，iOS 硬件 支持 3D Touch 技术 ， 该 技术 可 以 让 用 户 更 方便 地 对 内 容 进行 
预览 ， 如 图 1-37 所 示 。 





图 1-37 
由 此 可 以 预见 未 来 几 年 中 ， 将 会 有 更 多 的 手机 支持 该 技术 ， 现 在 市 面 上 已 经 有 大 量 支持 3D 
Touch 技术 的 应 用 软件 。 
互联 网 产品 迭代 速度 非常 快 ， 作 为 移动 UI 设计 师 ， 在 第 一 时 间 熟 悉 最 新 的 技术 并 将 其 运用 于 
实际 工作 中 ， 是 很 有 必要 的 。 


网 站 以 其 独特 的 信息 传播 特点 和 美学 特征 ， 为 交互 带 来 了 新 的 视野 。 网 站 彻底 改变 了 传统 媒 
体 的 艺术 创作 及 传播 模式 ， 将 用 户 作为 参与 主体 引入 网 络 艺术 的 创作 和 传播 过 程 中 ， 从 而 使 网 站 
设计 在 考虑 传统 美学 特征 和 传播 特点 的 同时 ， 还 应 该 符合 用 户 的 心理 感受 ， 即 用 户 体验 。 随 着 数 
字 技 术 的 发 展 和 交互 设计 研究 的 日 趋 成 熟 ， 网 站 设计 早期 对 “技术 至 上 ”和 “功能 至 上 ”的 追求 
逐渐 被 关注 用 户 体验 的 设计 理念 所 替代 。 用 户 体验 成 为 网 站 设计 的 基础 与 核心 。 


1.5.1 安全 网 页 宽度 与 首 屏 高 度 
通过 操作 系统 、 浏 览 器 和 系统 分 辩 率 的 分 析 ， 可 以 得 出 设计 网 页 的 安全 宽度 为 1002px， 可 建 
议 的 较 大 宽度 为 1258px。 
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在 Windows 操作 系统 中 常见 分 辩 率 1024 x 768px 下 ， 去 除 系统 任务 栏 、 浏 览 器 窗口 的 菜单 
栏 和 状态 栏 后 得 到 的 网 页 首 屏 可 视 高 度 平 均值 为 582px。 

在 常见 分 辨 率 1440 x 900px 下 ， 去 除 系统 任务 栏 、 浏 览 器 窗口 的 菜单 栏 和 状态 栏 后 得 到 的 
网 页 首 屏 可 视 高 度 平均 值 为 716px。 
如 图 1-38 所 示 为 网 页 在 不 同 分 辨 率 下 的 显示 效果 ， 分 辩 率 为 1024 x 768px 的 网 页 看 起 来 
比较 方正 ， 而 分 辩 率 为 1366 x 768px 的 网 页 则 呈 宽 屏 显示 。 





























纪 考虑 到 显示 器 的 尺寸 ， 照 顾 大 多 数 的 用 户 群体 ， 建 议 页 面 设 计 宽 度 在 
1920px 以 上 ， 在 设计 时 ， 要 充分 考虑 使 用 不 同 设备 的 用 户 ， 建 议 将 页 面 显 
示 区 设置 为 960 ~ 1350px。 























虽然 分 辨 率 有 变化 ， 但 该 网 页 中 内 容 的 展现 却 没有 任何 问题 ， 这 就 要 求 网 页 设计 者 在 网 页 设 
计时 考虑 到 网 页 尺寸 ， 适 合 的 尺寸 可 以 让 绝 大 多 数 浏览 者 得 到 较 好 的 视觉 体验 。 该 网 页 使 用 一 张 
大 幅 图 像 作为 页 面 的 背景 ， 这 样 在 大 多 数 的 分 辩 率 下 就 能 够 获得 很 好 的 视觉 体验 。 

[TCR 
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图 1-38 


1.5.2 ”常见 网 页 布局 形式 
不 同类 型 的 网 站 、 不 同类 型 的 页 面 往 往 有 固定 的 不 同 布局 ， 这 些 布局 符合 用 户 的 认 知 ， 在 页 
面 内 容 和 视觉 美观 之 间 取 得 平衡 。 按 照 分 栏 方式 的 不 同 ， 这 些 布局 模式 可 以 简单 地 分 为 3 类 : 一 
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栏 式 布局 、 两 栏 式 布局 和 三 栏 式 布局 。 
3》 1. 一 栏 式 布局 [| 
一 栏 式 布局 的 页 面 结构 简单 、 视 觉 

流程 清晰 ， 便 于 用 户 快速 定位 ， 但 由 于 

页 面 排 版 方式 的 限制 ， 只 适用 于 信息 量 

小 、 目 的 比较 集中 或 相对 比较 独立 的 网 

站 ， 因 此 ， 常 用 于 小 型 网 站 首页 及 注册 

表单 页 面 等 场合 。 
采用 一 栏 式 布局 的 首页 ， 其 信息 展 

示 集 中 ， 重 点 突出 ， 通 常会 通过 大 幅 精 

美的 图 片 或 者 交互 式 的 动画 效果 来 实现 

强烈 的 视觉 冲击 效果 ， 从 而 给 用 户 留 下 

深刻 的 印象 ， 提 升 品牌 效果 ， 吸 引用 户 

进一步 浏览 ， 如 图 1-39 所 示 。 但 是 ， 

这 类 首页 的 信息 展现 量 相对 有 限 ， 因 此 图 1-39 

需要 在 首页 中 添加 导航 或 者 重要 的 入 口 

链接 等 元 素 ， 起 到 入 口 和 信息 分 流 的 作用 。 


》2. 两 栏 式 布局 

两 栏 式 布局 是 最 常见 的 布局 方式 之 一 ， 这 种 布局 模式 兼 具 一 栏 式 布 局 和 三 栏 式 布局 各 自 的 优 
点 。 相 对 于 一 栏 式 布局 ， 两 栏 式 布局 可 以 容纳 更 多 的 内 容 ， 而 相对 于 三 栏 式 布局 来 说 ， 两 栏 式 布 
局 的 信息 不 至 于 过 度 拥挤 和 凌乱 ， 但 是 两 栏 式 布局 不 具备 一 栏 式 布局 的 视觉 冲击 力 和 三 栏 式 布局 
的 超大 信息 量 的 优点 。 

两 栏 式 布局 根据 其 所 占 面积 比例 的 不 同 ， 可 以 将 其 细 分 为 左 窄 右 宽 、 左 宽 右 窄 、 左 右 均等 3 
种 类 型 。 虽然 表 面 上 看 只 是 比例 和 位 置 的 不 同 ， 但 实际 上 它 影响 用 户 浏览 的 视线 流 及 页 面 的 整体 
重点 。 

1) 左 窗 右 宽 

左 窗 右 宽 的 布局 通常 采用 左 侧 是 导航 、 右 侧 是 网 页 的 内 容 设置 。 此 时 左 侧 不 适宜 放置 次 要 信 
息 或 广告 ， 否 则 会 过 度 干扰 用 户 浏览 主要 内 容 。 用 户 的 浏览 习惯 通常 是 从 左 至 右 ， 从 上 至 下 ， 因 
此 这 类 布局 的 页 面 更 符合 理性 的 操作 流程 ， 能 够 引导 用 户 通过 导航 查找 内 容 ， 使 操作 更 加 具有 可 
控 性 ， 适 用 于 内 容 丰富 、 叶 航 分 类 清晰 的 网 站 ， 如 图 1-40 所 示 。 
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2) 左 宽 右 罕 
和 左 窦 右 宽 方式 相反 ， 左 宽 右 窒 型 的 页 面 通常 内 容 在 左 ， 导 航 在 右 。 这 种 结构 明显 突出 了 内 
容 的 主导 地 位 ， 引 导 用 户 将 视觉 焦点 放 在 内 容 上 。 在 用 户 阅 读 内 容 的 同时 或 者 阅读 之 后 ， 才 能 引 
导 其 关注 更 多 的 相关 信息 ， 如 图 1-41 所 示 。 
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图 1-41 


3) 左右 均等 
左右 均等 是 指 左右 两 侧 的 比例 相差 较 小 ， 甚 至 完全 一 致 。 运 用 这 种 布局 类 型 的 网 站 较 少 ， 适 
息 的 重要 程度 相对 比较 均等 的 情况 ， 不 体现 出 内 容 的 主 次 ， 如 图 1-42 所 示 。 
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》3. 三 栏 式 布局 

三 栏 式 布局 方式 对 于 内 容 的 排版 更 加 紧凑 ， 可 以 更 加 充分 地 运用 网 站 的 空间 ， 尽 量 多 地 显示 
信息 内 容 ， 增 加 信息 的 密集 性 ， 常 见于 信息 量 非常 丰富 的 网 站 ， 如 门户 网 站 或 电 商 网 站 的 首页 。 
内 容 过 多 会 造成 页 面 上 的 信息 拥挤 ， 用 户 很 难 找到 需要 的 信息 ， 增 加 了 用 户 查 找 所 需 内 容 的 时 间 ， 
降低 了 用 户 对 网 站 内 容 的 可 控 性 。 
由 于 屏幕 的 限制 ， 三 栏 式 布局 相对 类 似 ， 区 别 主要 是 比例 上 的 差异 。 常 见 的 包括 两 种 方式 : 
第 一 种 方式 中 间 宽 、 两 边 罕 ， 将 主要 的 内 容 放置 在 中 间 栏 ， 左 右 两 栏 放置 导航 链接 或 次 要 内 容 ; 
第 二 种 方式 两 栏 帘 、 一 栏 窒 ， 两 栏 放 置 重要 内 容 ， 另 一 栏 放置 次 要 内 容 ， 如 图 1-43 所 示 。 

很 多 门户 网 站 和 电 商 网 站 都 采用 中 间 宽 、 两 边 窦 的 方式 ， 常 见 比例 为 1: 2 : 1， 中 间 栏 由 于 在 
视觉 比例 上 相对 显眼 ， 因 此 ， 用 户 默认 将 中 间 栏 的 信息 处 理 成 重点 信息 ， 两 边 的 信息 自动 处 理 为 
次 要 的 信息 和 广告 等 ， 这 类 布局 往往 引导 用 户 将 视线 聚焦 于 中 间 部 分 ， 部 分 流向 两 边 ， 重 点 较为 
突出 ， 但 却 容易 导致 页 面 的 整体 利用 率 降 低 ， 如 图 1-44 所 示 。 
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图 1-44 

两 栏 宽 、 一 栏 窒 布 局 方式 也 较为 常见 ， 最 常见 的 比例 为 2 : 2 : 1。 较 宽 的 两 栏 常用 来 展现 重 

点 信息 内 容 ， 较 窄 的 一 栏 常用 来 展现 辅助 信息 。 因 此 ， 相 对 于 前 一 种 布局 方式 ， 它 能 够 展现 更 多 
的 重点 内 容 ， 提 高 了 页 面 的 利用 率 ， 但 相对 而 言 ， 重 点 不 如 第 一 种 方式 突出 和 集中 。 


网 页 布局 的 原则 包括 协调 、 一 致 、 流 动 、 均 衡 、 强 调 等 ， 如 表 1-5 所 示 。 
表 1-5 
原则 说 明 
协调 将 网 站 中 的 每 一 个 构成 要 素 有 效 地 结合 或 者 联系 起 来 ， 给 浏览 者 一 个 既 美 观 又 实用 的 网 页 界面 
3 网 站 整个 页 面 的 构成 部 分 要 保持 统一 的 风格 ， 使 其 在 视觉 中 整齐 、 一 致 


流动 网 页 布局 的 设计 能 够 让 浏览 者 赁 着 自己 的 感觉 走 ， 并 且 页 面 的 功能 能 够 根据 浏览 者 的 兴趣 链接 
到 其 感 兴趣 的 内 容 上 


均衡 将 页 面 中 的 每 个 要 素 有 序 地 进行 排列 ， 并 且 保 持 页 面 的 稳定 性 ， 适 当地 加 强 页 面 的 实用 性 
强调 在 不 影响 整体 设计 的 情况 下 ， 把 页 面 中 想 要 突出 展示 的 内 容 用 色彩 搭配 或 者 留 白 的 方式 最 大 限 
度 地 展现 出 来 
另外 ， 在 进行 网 页 布局 的 设计 时 ， 需 要 考虑 到 网 站 页 面 的 醒目 性 、 创 造 性 、 造 型 性 、 可 读 性 
和 明快 性 等 因素 ， 如 表 1-6 所 示 。 
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表 1-6 
醒目 性 吸引 浏览 者 的 注意 力 到 该 网 站 页 面 上 ， 并 引导 其 对 该 页 面 中 的 某 部 分 内 容 进行 查看 
创造 性 让 网 站 页 面 更 加 富有 创造 力 和 独特 的 个 性 特征 
造型 性 使 网 页 在 整体 外 观 上 保持 平衡 和 稳定 
可 读 性 网 站 中 的 信息 内 容 词语 简洁 、 易 懂 
明快 性 网 页 界面 能 够 准确 、 快 捷 地 传达 页 面 中 的 信息 内 容 


1.5.4 网 页 中 的 配色 方法 


在 网 页 的 设计 过 程 中 ， 在 对 网 页 元 素 使 用 颜色 时 ， 难 免 会 出 现 一 些 问题 ， 总 是 觉得 配色 不 够 
完善 。 下 面 对 网 页 配色 中 经 常 遇 到 的 问题 进行 总 结 和 归纳 ， 为 读者 提供 参考 。 

》1. 如 何 培养 色彩 的 敏感 度 

能 够 对 色彩 运用 自如 ， 不 仅仅 只 靠 敏锐 的 审美 观 ， 即 使 没有 任何 美术 功底 ， 只 要 做 到 经 常 收 
集 和 记录 ， 一 样 能 够 有 敏锐 的 色彩 感 。 

可 以 尽量 多 收集 生活 中 喜欢 的 色彩 ， 无 论 是 数码 的 、 平 面 的 ， 各 式 各 样 的 素材 ， 然 后 将 所 收 
集 的 素材 ， 依 照 红色 、 权 色 、 黄 色 、 绿 色 、 蓝 色 、 遂 色 、 和 紫色、 黑色、 白色、 灰色、 金色、 银色 
等 不 同 的 色 系 分 门 别 类 ， 这 就 是 最 好 的 色彩 资料 库 ， 以 后 在 需要 配色 时 ， 就 可 以 从 色彩 资料 库 中 
找到 适当 的 色彩 与 质感 。 

使 用 明度 和 纯度 都 较 高 的 栖 色 作为 页 面 的 背景 色 ， 表 现 出 激情 与 活力 ， 搭 配 同样 纯度 的 黑色 
和 洋红 色 等 色彩 ， 使 整个 页 面 更 加 富有 激情 与 活力 ， 如 图 1-45 所 示 。 

色相 的 协调 虽然 很 重要 ， 但 要 是 没有 明暗 度 的 差异 ， 配 色 也 不 会 美观 。 要 训练 自己 对 色彩 明 
度 的 敏感 度 , 在 收集 色彩 素材 时 , 可 以 同时 测量 一 下 它 的 亮度 , 或 者 制作 从 白色 到 黑色 的 亮度 标尺 ， 
记录 该 素材 最 接近 的 亮度 值 ， 如 图 1-46 所 示 。 
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图 1-46 
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》 2. 配色 时 应 该 选择 双色 还 是 多 色 组 合 

单个 颜色 的 明暗 度 组 合 ， 给 人 的 统一 感 会 很 强 ， 容 易 给 人 留 下 深刻 印象 ， 双 色 组 合 会 使 颜色 
层次 明显 ， 让 人 一 目 了 然 ， 产 生 新 鲜 感 。 多 色 组 合 会 让 人 产生 愉悦 感 ， 丰 富 的 色彩 也 会 使 人 更 容 
易 接受 ， 在 色彩 的 排列 上 也 会 因 顺 序 的 变化 ， 给 人 截然 不 同 的 感觉 。 

》 3. 尽 可 能 使 用 两 三 种 颜色 进行 搭配 

虽然 多 色 的 组 合 能 让 人 产生 愉悦 感 ， 但 是 人 的 眼睛 和 记忆 只 能 存储 两 三 种 颜色 ， 过 多 的 色彩 
可 能 会 使 页 面 显得 较为 复杂 、 分 散 。 相 反 ， 较 少 的 色彩 搭配 能 在 视觉 上 让 人 印象 深刻 ， 也 便于 设 
计 者 合理 搭配 ， 更 容易 让 人 们 接受 ， 如 图 1-47 所 示 。 
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》 4. 如 何 快速 实现 完美 的 配色 


[HE 在 进行 网 页 配色 时 ， 可 以 试 着 联想 某 个 具体 物体 的 色彩 印象 ， 从 物体 色彩 出 发 。 例 如 ， 想 
表现 出 一 种 清凉 舒适 的 感觉 ， 可 以 联想 到 水 、 植 物 及 其 他 有 生机 的 东西 ， 这 样 在 你 的 脑 中 浮现 的 
代表 颜色 有 蓝 色 、 绿 色 、 和 白色 ， 可 以 把 这 些 颜 色 挑选 出 来 加 以 运用 ， 如 图 1-48 所 示 。 
选 定 色彩 时 , 确定 一 个 页 面 的 主 色调 , 再 搭配 一 两 个 合适 的 辅助 色 。 如 果 想 要 呈现 一 种 沉着 、 
冷静 的 感觉 ， 应 以 冷色 调 中 的 蓝 色 为 主 ， 如 图 1-49 所 示 。 
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图 1-49 





移动 互联 网 之 路 一 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 





同样 的 配色 在 面积 、 比 例 和 位 置 稍 有 不 同时 ， 带 给 人 们 的 感觉 也 会 不 同 ， 在 制作 时 可 以 考 
虑 多 种 配色 组 合 ， 挑 选 效果 最 佳 的 配色 色彩 ， 如 图 1-50 所 示 。 








本 章 讲解 了 UI、UE 和 ID 的 基本 概念 ， 使 用 户 了 解 这 三 者 的 区 别 及 联系 ， 讲 述 了 用 户 体验 的 
一 般 设 计 流 程 、iOS 和 Android 的 设计 特色 、 移 动 UI 的 基本 常识 和 网 页 UI 的 基本 常识 。 通 过 本 
章 的 学 习 ， 用 户 对 UI 设计 应 有 最 基本 的 认识 ， 为 全 面 、 具 体 地 学 习 UI 设计 及 Sketch 软件 的 应 
用 做 好 准备 。 


本 章 知 识 点 
绘制 Apple Watch 界面 
绘制 iOS 旅游 APP 跳 转 


页 面 





| 绘制 Apple Watch 界面 


le Watch Edition 三 种 风格 不 
人 造 蓝宝石 水 晶 屏 幕 与 Force 


句 ， 在 风格 上 宜 简 洁 、 大 和 气 且 不 


Apple Watch 有 Apple Watch、Apple Watch Sport 和 Ap 
同 的 系列 ， 是 苹果 公司 于 2014 年 9 月 公布 的 一 款 智 能 手表 ， 采 
Touch 触摸 技术 。 在 设计 其 界面 时 ， 要 把 控 好 其 用 户 群 的 心理 倾 
失 端 庄 感 ， 如 图 2-1 所 示 。 
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A 绘制 Apple Watch 界面 
实战 源 文件 : 源 文件 \ 计 步 APP 线 框图 .sketch 
视频 : 视频 \ 应 用 案例 \ 第 2 章 \2.1.1.mp4、2.1.2.mp4、2.1.3.mp4 






案例 分 析 设计 分 析 色彩 分 析 
本 案例 为 制作 Apple Watch Apple Watch 界 ” 主 色 : 


界面 ,从 新 建 Sketch 文档 开始 ，。 面 很 小 ， 设 计时 需要 [Eee al 

初步 运用 了 插入 形状 和 插入 文本 突出 重点 ， 本 案例 不 辅 色 : 

等 工具 ， 以 及 如 何 使 用 快捷 方法 。” 仅 抓 住 了 表达 主题 ， 

对 图 层 对 象 进行 复制 和 移动 等 。 。 而 且 做 到 了 在 整体 结 ee ee 
通过 学 习 本 案例 ， 可 以 了 解 一 些 。 构 上 清晰 、 细 致 ， 辅 。 贡 炒 绿 和 湿 声 刀 后 的 宴 花 粉 ， 构 成 鲜 
最 简单 的 基本 操作 ， 体 会 Sketch 。 色 的 运用 也 起 到 了 承 。 吉明 快 的 跳 跑 色 拱 配 ， 给 人 以 青春 、 
软件 操作 的 便捷 与 简洁 。 上 启 下 的 作用 。 全 ET 


向 上 的 精神 面 狐 ， 又 使 人 感到 温暖 。 


EA 搬 > 什么 是 Sketch 

Sketch 是 一 款 适用 于 所 有 设计 师 的 矢量 绘图 软件 。 矢 量 绘图 也 是 目前 进行 网 页 、 图 标 及 界面 
设计 的 最 好 方式 。 但 除了 矢量 编辑 的 功能 之 外 ，Sketch 同样 添加 了 一 些 基本 的 位 图 工具 ， 例 如 ， 
模糊 和 色彩 校正 。 

我 们 尽力 让 Sketch 容易 理解 并 上 手 简单 ， 有 经 验 的 设计 师 花 上 几 个 小 时 便 能 将 自己 的 设计 技 
巧 在 Sketch 中 运用 自如 。 对 于 绝 大 多 数 的 数字 产品 设计 来 说 ，Sketch 都 能 替代 Photoshop、 
lllustrator 和 Fireworks 。 

正直 作为 什么 选择 Sketch 

Sketch 是 为 图 标 设计 和 界面 设计 而 生 的 。 它 是 一 个 有 着 出 色 UI 的 一 站 式 应 用 ， 所 有 用 户 需 
要 的 工具 都 触手 可 及 。 在 Sketch 应 用 中 ， 画 布 将 是 无 限 大 小 的 ， 每 个 图 层 都 支持 多 种 填充 模式 ， 
具有 最 棒 的 文字 演 染 和 文本 样式 ， 还 有 一 些 文件 导出 工具 。 

必要 时 ， 用 户 可 以 用 无 限 精准 的 分 辨 率 无 关 模式 来 查看 画布 ， 或 者 打开 像素 模式 来 查看 每 一 
个 像素 导出 后 的 样子 。 

但 是 Sketch 并 不 是 一 个 位 图 编辑 应 用 。 也 就 是 说 ， 如 果 用 户 想 修正 一 张 照片 或 者 用 笔 刷 来 
画 画 ， 那 么 该 软件 就 不 适用 。 


操作 指南 安装 Sketch 


》 视频: 视频 \ 操 作 指南 \ 安 装 Sketch.mp4 


在 浏览 器 中 输入 Sketch 的 官网 地 址 http://www.sketchapp.com, 打开 Sketch 的 官方 网 站 ， 
如 图 2-2 所 示 。 在 官方 网 站 中 单 击 Download Free Trial 按钮 ， 即 可 下 载 试用 版 ， 如 图 2-3 所 示 。 
下 载 完成 后 得 到 一 个 大 小 为 23.15MB 的 Sketch.zip 文件 ， 解 压 后 得 到 如 图 2-4 所 示 的 黄 
色 钻 石 图 标 文件 ， 将 该 文件 拖 入 应 用 程序 的 文件 夹 ， 如 图 2-5 所 示 ， 便 完成 Sketch 的 安装 。 
安装 完 Sketch 后 ， 可 以 从 两 个 地 方 找到 Sketch， 一 个 是 在 应 用 程序 文件 夹 中 ， 如 图 2-6 
所 示 。 另 一 个 是 在 Launchpad 中 ， 即 按 [ F4 】 键 ， 在 屏幕 上 左右 滑动 ， 即 可 找到 Sketch 图 标 ， 
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如 图 2-7 所 示 。 
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图 2-6 
操作 指南 启动 Sketch 
了 视频: 视频 \ 操 作 指南 \ 启 动 Sketch.mp4 


[IE 在 Launchpad 中 ， 在 屏幕 上 左右 滑动 ， 找 到 并 单 击 Sketch 图 标 ， 如 图 2-8 所 示 。 单 
百 弹 出 如 图 2-9 所 示 的 “启动 ”对 话 框 。 
OZ 在 “启动 ”对 话 框 中 有 两 个 选项 卡 ，Recents 选项 卡 中 除了 “新 建文 档 ” 选 项 外 ， 还 罗列 
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了 最 近 打开 的 Sketch 文档 , 如 图 2-10 所 示 ; Templates 选项 卡 中 为 用 户 准 备 了 几 个 常用 的 模板 ， 
选择 其 中 一 个 选项 ， 单 击 Choose 按钮 ， 即 可 创建 一 个 模板 文档 ， 如 图 2-11 所 示 。 
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we ED 
| IO! ) 国 1 
Welcome to Sketch = a a 
久 男 
ET 0 
图 2-9 
pe mn Ear Pit. we EE | | 三 一 
图 2-10 图 2-11 
打开 后 在 窗口 下 面 的 Dock 中 即 可 看 到 该 软件 的 图 标 。 为 了 方便 起 见 ， 右 击 该 图 标 ， 在 弹 
出 的 快捷 菜单 中 选择 “在 Dock 中 保留 ”选项 ， 如 图 2-12 所 示 。 
> V 在 Dock 中 保留 
显示 所 有 窗口 
隐藏 
2.1.1 插入 Apple Watch 画板 
如 果 想 设计 一 个 界面 ， 首 先 要 从 插入 画板 开始 ， 执 行 “ 插 入 一 画板 ”命令 ， 会 看 到 左 侧 已 经 














有 很 多 个 画板 预 设 的 版 本 ， 单 击 即 可 将 该 画板 添加 到 画布 
使 用 快捷 键 [ Command+D 】 来 完成 。 








P 。 如 果 想 宇 





和 复 置 入 同一 个 




















| 在 Dock 中 保留 的 Sketch 
该 图 标 启动 Sketch 。 
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6 Templates 选项 | 
选项 。 


画板 ， 可 以 
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插入 ”按钮 ， 选 择 “ 画 板 ”选项 ， 在 
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fa sh | | : 
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图 





在 左 侧 图 层面 板 中 可 以 看 到 ， 在 “页 面 1 
i 中 新 创建 了 一 个 名 为 Apple Watch 38mm | 
i 的 画板 。 : 
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则 | 


| 检查 器 列表 中 弥 先 Background color 和 | 


Include in Export 复 选 框 ， 修 改 填充 颜色 ; 


为 
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EQ: 9 02 Bu LT7 






























知识 链接 
安装 完 Sketch 
了 菜单 栏 ， 另 一 个 是 出 


Sketch 的 欢迎 窗口 




















现 了 欢迎 窗 


， 如 图 














2-13 所 示 。 














后 ， 第 一 次 打开 该 软件 ， 会 发 现 屏幕 上 两 个 地 方 发 生 了 变化 , 一 





个 
1 
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已 
ZE. 


图 2-13 
本 书 使 用 Sketch 的 最 新 版 本 Version 47.1， 此 次 更 新 更 多 地 气 弃 7 了 拟 物 化 的 图 
2-14 所 示 。 
































的 图 标 和 欢迎 窗口 变 得 更 加 简洁 ， 如 图 
Recents 
Welcome to Sketch 
EED Android 图 标 设计 ios 应 用 图 标 

sketch FF? > nn 

加 订阅 我 们 的 资讯 g 0 

图 Wm Sketch Mirror Material Design 网 站 设计 

pp 加 入 Sketch Cloud 

caneol 


Open an Existing File, 





标 ，Sketch 











图 2-14 


在 本 书 的 后 续 内 容 中 ， 通 过 使 用 Sketch 进行 界面 和 图 标 等 设计 时 ， 将 会 详 


“a 


望 用 户 对 该 软件 有 初步 了 解 ， 对 各 板块 的 详细 内 容 不 做 深入 介绍 。 


Sketch 的 主 界面 
Sketch 完全 遵循 了 Mac 系统 的 软件 设计 规范 ， 如 果 读 者 使 




















用 过 苹果 公司 的 iWork 软件 



















































































Pages、Numbers 和 Keynote， 就 会 对 这 样 的 页 面 布局 很 熟悉 。 
Sketch 的 界面 主要 由 菜单 栏 、 工 具 栏 、 检 查 器 、 图 层面 板 及 画布 区 域 组 成 ， 如 图 2-15 所 示 。 
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菜单 栏 
工具 栏 





图 层面 板 - 














工具 栏 


菜单 栏 下 方 的 区 域 为 Sketch 的 工具 栏 ， 如 图 2-16 所 示 。 用 户 可 以 将 工具 栏 简单 理解 成 该 软 
件 常 用 工具 的 快捷 入 口 。 要 执行 某 一 功能 ， 只 需 选中 图 层 后 单 击 该 功能 在 工具 栏 上 的 图 标 即 可 。 


pp wa RE 


加 此 [ Ge 2 2 训 二 到 FF oo 加 有 uv 
图 2-16 
如 果 需 要 自 定 义工 具 栏 ， 用 户 可 以 将 光标 移动 到 工具 栏 所 在 区 域 ， 然 后 右 击 ， 在 弹出 的 快捷 


菜单 中 选择 “ 自 定义 工具 栏 ”选项 即 可 ， 如 图 2-17 所 示 。 i 
a nv 全 
上 导 二 计 > 自 定义 工具 栏 ab i 


〗 公文 本 
视频: 视频 \ 操 作 指南 \ 自 定义 工具 栏 .mp4 aa 


在 工具 栏 空 白 处 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “ 自 定义 工具 栏 ” 图 2-17 
选项 ， 弹 出 如 图 2-18 所 示 的 对 话 框 。 
将 喜欢 的 项 目 拖 入 工具 栏 … 

OP ne 


周 到 四 只 由 中 让 


分 组 。 取消 分 组 ”合并 形状 ”合并 形状 ” 减 去 顶层 “区域 相交” 排除 重生 。 前 移 


司 回 丰 加 0 入 个 


最 板 。 ”显示 。 显示 标尺 显示 网 格 ” 时 示 布 忆 ”显示 像 委 。。“ 竺 出 。 对 齐 像 案 他 





















7 田 国 国信 人 会 广 田 加 
项 头 。 形状。 矩形 。 国 角 矩形 怖 国 形 。 三 角形 。 事 边 形 。 星 形 组件 。 悍 式 文本 
宇 回 太 6 XX 85 口 
后 小 工具 。 安 志 拼合 对 发 转 旬 制 国 辑 族 转 办 条 。 训 放 
YY -QA+ Mo 4 [9 
组 


件 生疏 创建 风格 Mirror 。 Cloud 。 基色 字体 ”间距 。 可 油 问 距 




















心 或 者 将 默认 的 一 组 拖 入 工具 栏 . 

妨 国 知 i es Eh od 一 二 忆 总 号 外 
Lai 目 Cx | 
图 2-18 
IO 选择 要 拖 入 工具 栏 的 工具 ， 直 接 向 上 拖 动 到 工具 栏 上 , 如 图 2-19 所 示 。 单 击 “ 完 成 ”按钮 ， 
即 可 完成 自 定义 工具 栏 的 操作 。 
1GSE2 如 果 要 将 工具 栏 上 的 工具 删除 ， 只 需 执行 相反 操作 ， 即 选中 需要 删除 的 工具 并 拖 动 到 工具 
栏 之 外 的 地 方 放手 ， 会 看 到 一 个 烟雾 消失 的 动 效 ， 即 表示 删除 成 功 ， 如 图 2-20 所 示 。 
对 话 框 下 面 有 一 组 被 矩形 框 隔离 出 来 的 工具 条 ， 该 工具 条 是 系统 默认 工具 栏 上 的 工具 ， 如 

果 需 要 恢复 工具 栏 的 默认 工具 ， 只 需 将 该 矩形 框 选中 拖 动 到 工具 栏 即 可 ， 如 图 2-21 所 示 。 
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~… 或 者 将 默认 的 一 组 拖 入 工具 栏 。 


四 周 隔 四 


插入 分 组 ”取消 分 组 创建 组 件 
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53% 及 加 变换。 族 畦 到 合 


i aa 加 画 《3 BD 放 外 并 十 祥 回 4 
创建 组 全 53% 编 王 -安装 起 持 到 合 [i 合并 形式 “ 茂 去 顶 司 ”可 声 梧 交 基 除 匡 鲁 上 移 一 且 下 移 一 层 Mirror ©| 
将 喜欢 的 项 目 抑 入 工具 栏 … 人 

7 T/A/ OA 

插入 矢量 名 笔 文本 图 片 切片 面板 直线 英 关 形状 矩形 。 圈 角 矩形 。 痊 国 形 。 三 角形 。 多 边 形 星 形 组件 样式 文本 

周 了 回归 中 中 让 证 守 回 太 OX 沪 8@5D0 BD 

分 组 取消 分 组 ”合并 形状 ”合并 形状 ” 减 去 顶层 ”区 乱 相 交 ”排除 重 骆 。 前 移 后 移 工具 变换 料 合 勇 刀 旋转 复制 编辑 旋转 轮 巴 缩放 

国 回国 0 着 个 轩 四 -QaQ+ :2.0 4 | 器 

票 板 显示 显示 标尺 显示 网 格 显示 布局 ”显示 像素 导出 对 齐 像素 创建 组 件 系 放 创建 网 格 。 Mirror Cloud 颜色 字体 间距 可 调 间距 


SG 下 G50 OB Fw 


向 板 。 简 放 。 合并 形状 减 去 顶层 区 域 相交 排除 重 业 。 前 移 后 移 。 Miror cloud 。 显示 。 导出 

















让 昭和 证 宇 回 心 加 让 





显示 | 图 标 和 文本 加 











3 | 心 或 者 将 默认 的 一 组 拖 入 工具 栏 。 








中 加 DSS Sa OU GD 二 日 回放 


ey A De ex Ra ne 6。 wo cho ai 机 





图 2-21 


用 户 可 以 在 对 话 框 最 下 面 的 “显示 ”下 拉 列 表 中 选择 工具 栏 上 工具 的 显示 效果 ， 有 3 种 样式 





可 供用 户 选择 : 图标 和 文本 、 仅 图 





标 和 仅 文 本 ， 用 户 可 根据 习惯 进行 设置 。 


工具 栏 的 隐藏 与 显示 的 快捷 键 是 [ Command+Option+T 】, 或 者 执行 “显示 一 隐藏 工具 栏 ” 


命令 进行 切换 。 


2.1.2 绘制 Apple Watch 界面 首页 


无 论 是 设计 界面 、 图 标 、 按钮 , i 
也 是 最 基础 的 ， 下 面 在 


| [] 在 工具 栏 中 可 以 修改 文件 的 名 称 、 








和 标注 样式 。 


























还 是 绘制 一 个 简单 的 插画 ， 插 入 形状 和 文字 几乎 是 必 不 可 少 的 ， 
案例 中 演示 如 何 插入 文本 和 形状 





选项 ， 在 画布 中 单 击 给 入 文字 
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” sD 


Zea | 6 | 194| 241 100 
Pox A 
























































也 文本 ， 
值 与 之 前 的 相同 ， 


类 续 插入 文本 ， 修 
.中 5 .文字 大 小 为 28。 
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上 的 “插入 ”按钮 ， 选 择 “ 形 状 在 设置 圆 角 和 矩形 的 参数 ， 注 
角 和 矩形 ”选项 ， 插 入 圆 角 矩形 。 选 “ 描 边 ” 复 选 框 ， 分 别 设置 圆 角 和 矩形 的 宽 高 、 
半径 和 填充 颜色 。 
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样式 文本 








移动 互联 网 之 路 一 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 


P， 按 住 【 Alt+Shift 】 键 的 
按 快捷 键 【 Command+V ] 粘贴 , ; 复制， 重复 操作 此 步骤 。 
it 】 键 不 放 ， 拖 动 被 复制 的 圆 角 多 


































































































矩形 ， 拖 动 5 法 ， 调 整 其 
角 矩 形 的 高 度 。 
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的 “插入 ”按钮 ， 选 择 “ 文 本 ” 选 







































































色 和 大 小 与 上 一 步 相 兰 上 的 “插入 ”按钮 选择“ 形状 一 
， 调 整 行 高 选项 。 
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April 2017 
2 这 | 国生 R 
本 固形 0 
文本 于 
国 mnew vu 
仿 是 
[el Wi ^A| 会 Si 
8 切片 S 三 角形 
| 图 os FFsmiait » 
样式 文本 p 














股 置顶 圆 形 宽 和 高 的 值 为 8， 行 “ 编 辑 一 拷贝 一 拷贝 ”和 “编辑 一 粘 由 
为 白色 ， 取 消 义 选 “ 描 边 ” 复 选 框 。 占 贴 ”命令 ， 复 制 白 色 椭圆 形 ， 按 住 【 Shift 】 
键 的 同时 进行 拖 动 调整 位 置 ， 使 用 相同 的 方 ; 
复制 另 一 个 椭圆 形 , 在 拾 色 器 中 修改 填充 颜 
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01 了 :> Sketch 中 的 工 


Sketch 中 有 60 多 个 工具 , 都 被 放 在 工具 栏 中 ,Sketch 的 工具 栏 涵盖 创作 中 所 需 的 所 有 工具 ， 
每 一 个 工具 都 能 够 单独 完成 一 项 任务 ， 设 计 过 程 即 工具 的 综合 运用 ， 下 面 简单 介绍 一 下 Sketch 中 
的 工具 。 

3》 1. 插入 
单 击 “ 插 入 ”按钮 ， 这 里 罗列 了 一 些 常用 工具 ， 包 括 形状 、 矢 量 、 铅 笔 、 文 本 、 图 片 、 画 板 、 
切片 、 组 件 、iOS 用 户 界面 设计 和 样式 文本 等 ， 用 户 可 以 通过 直接 在 此 处 选择 工具 进行 设计 。 

》 2. 形状 

选择 “形状 ”选项 ， 可 以 看 到 其 中 包含 直线 、 箭 头 、 和 矩形 、 椭 圆 形 、 圆 角 和 矩形 、 星 形 、 多 边 
形 和 三 角形 , 选择 某 一 工具 在 画布 中 单 击 并 拖 动 鼠 标 可 绘制 该 形状 , 然后 通过 检查 器 调整 各 项 参数 ， 
可 以 达到 多 种 多 样 的 效果 ， 如 图 2-22 所 示 。 


































































































































































































































































































































































































35 @ 


移动 互联 网 之 路 一 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 

















形状 > /i L 
信和 v| Fe 
PR r| 国生 R 
Tw E On o 
到 BA 国 maxs# vu 
EE Te 
和 枉 A 会 Sup 

8 切片 s| A =ns 
组 件 * 县 | 
图 osmrmaiai+ > 
国 #tx* > 
图 2-22 


2.1.3 绘制 Apple Watch 界面 第 2 页 和 第 3 页 


拷贝 和 粘贴 图 形 及 文字 是 UI 设计 中 的 常用 手段 ， 本 书 将 通过 下 面 的 案例 展示 如 何 对 图 层 及 图 
层 组 进行 复制 。 




































































可 以 在 工具 区 看 到 被 复制 的 画板 ， 使 用 相 后 
的 方法 继续 复制 第 2 个 画板 。 





























出 的 快捷 中 选择 “ 复 [02 

















































凌 充 颜色 Hex 值 为 2EC2F1 频 色 ， 
象 ， 将 Hex 值 设置 为 60D56D。 将 第 1 个 置 Hex 信 为 F6537F。 将 第 1 个 顶 加 
椭圆 全 第 2 个 椭圆 充 颜色 修改 为 灰色 ， 第 3 个 椭圆 形 的 填 
形 的 填充 颜色 修改 为 色 修 改 为 白色 。 
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[所 避 全 Sketch 快捷 键 


与 其 他 的 设计 类 软件 相似 ，Sketch 大 部 分 功能 都 有 快捷 键 ， 即 使 没有 预 设 快捷 键 的 功能 ， 用 
户 也 可 以 通过 自 定义 快捷 键 来 设置 。 

相信 使 用 快捷 键 的 好 处 大 家 都 明白 ， 但 是 很 多 人 却 因为 使 用 软件 产生 习惯 而 不 去 使 用 快捷 键 
或 者 总 是 忘记 快捷 键 。 





















































具 时 要 习惯 不 从 菜单 中 找 ， 而 是 直接 按 该 功能 的 快捷 键 ， 这 样 不 用 多 久 便 
能 把 使 用 快捷 键 变 成 一 种 习惯 。 


在 介绍 快捷 键 之 前 ， 为 了 保证 计算 机 不 在 身边 的 用 户 能 够 更 快 地 进行 学 习 ， 将 苹果 电脑 键盘 
示 给 大 家 , 键 位 不 熟悉 的 用 户 可 以 参看 ， 


5 图 2-23 所 示 。 加 ED 国 EF WD WE ED ED EN ED ED ED ED 
对 于 Sketch 未 说 ， 典 练 使 用 忆捷 名 | 国 


上 建议 用 户 刚 开 始 接触 软件 时 就 养 成 使 用 快捷 键 的 习惯 ， 当 需要 使 用 某 个 工 








快捷 刍 。 
Control+H: 触发 选区 手柄 。 
Control+L: 触发 自动 参考 线 。 
Control+G: 触发 网 格 。 
Space: 抓 手工 具 。 
Enter: 编辑 所 选 图 层 。 
国 +3: 滚动 至 所 选 图 层 。 
园 +2: 放大 所 选 图 层 。 
Z: 按 住 【Z 】 键 ， 单 击 拖 动 出 一 个 区 域 放 大 。 缩 小 则 按 快捷 键 【Z + Alt 】 再 单 击 。 
Escape: 退出 当前 工具 ， 取 消 选择 所 有 图 层 或 返回 检查 器 。 
Tab/Shift-tab: 在 当前 群 组 中 切换 不 同 图 层 。 

除了 通用 的 快捷 键 外 ， 其 余 快 捷 键 不 建议 死记 硬 背 ， 而 是 希望 用 户 在 需要 使 用 某 个 工具 时 ， 
尽量 使 用 快捷 键 执行 。 如 果 不 记得 可 以 在 本 节 的 快捷 键 列表 中 进行 查询 ， 或 者 直接 在 菜单 选项 的 
右 侧 看 到 相应 的 快捷 键 ， 相 信 这 样 反 复 操作 几 次 之 后 自然 就 会 记 住 了 。 

(1) 文件 处 理 快 捷 键 如 表 2-1 所 示 。 


oree Im rr ee 




















打开 Command+O Shift+Command+S 
关闭 Command+S 导出 Shift+Command+E 
保存 Command+W 页 面 设置 Shift+Command+P 


(2) 编辑 相关 快捷 键 如 表 2-2 所 示 。 


表 2-2 
| 执行 命 人 SS | 快捷 建  《 生 | 执行 命令 
Undo 移动 图 层 ”Command+Z 全 选 Command+A 
重 做 ShifttrCommand+Z 缩放 Command+K 
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续 表 
执行 命令 
前 切 Command+X 拷贝 样式 Option+Command+C 
拷贝 Command+C 粘贴 样式 Option+Command+V 
粘贴 Command+V 拾 色 器 Control+C 
粘贴 到 所 选 Shift+Command+V 显示 /隐藏 拼写 和 语法 Command+: 
粘贴 并 保留 样式 ”Option+Shift+Command+V ”检查 拼写 Command+; 
复制 Command+D 表情 与 符号 Control+Command+Enter 
删除 Delete 
(3) 矢量 相关 快捷 键 如 表 2-3 所 示 。 
表 2-3 
执行 命令 快捷 键 执行 命令 快捷 键 
矢量 V 直线 E 
铅笔 P 和 矩形 R 
文本 UE 椭圆 形 O 
画板 A 贺 角 和 矩形 U 
切片 S 
(4) 调整 相关 快捷 键 如 表 2-4 所 示 。 
表 2-4 
合并 形状 Option+Command+U 拉 伸 Control+1 
减 去 顶层 Option+Command+S 固定 在 角落 Control+2 
区 域 相交 Option+Command+l 缩放 对 象 Control+3 
排除 重 伍 Option+Command+X 浮动 位 置 Control+4 
图 层 变形 ShiftkCommand+T 转换 为 轮廓 ShifttCommand+O 
旋转 图 层 Shiftt+Command+R 使 用 图 形 蒙 版 Control+Command+M 
(5) 文本 相关 快捷 键 如 表 2-5 所 示 。 
表 2-5 
执行 命令 快捷 刍 快捷 键 
粗 体 Command+B 左 对 齐 Command+Shift+ { 
斜体 Command+l 居中 对 齐 Command+Shift+| 
下 画 线 Command+U 右 对 齐 Command+Shift+ } 
增 大 字号 Option+Command+= ” 字 距 收 紧 Option+Control+T 
减 小 字号 Option+Command+ 一 ” 字 距 放宽 Option+Control+L 
修改 字体 Command+T 将 文本 转换 为 轮廓 Shiftt+Command+O 
(6) 图 层 相关 快捷 键 如 表 2-6 所 示 。 
表 2-6 
| 执行 命令 | 快捷 建  《“《| 执行 命令 | 快捷 键 
上 移 一 层 Option+Command+ 1 隐藏 图 ShiftktCommand+H 
移 到 最 前 Control+ Option+Command+ 1 ”锁定 图 层 ShifttCommand+L 
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续 表 
下 移 一 层 Option+Command+ 1 重 命名 图 层 Command+R 
移 到 最 后 Control+Option+Command+ | ”分 组 图 层 Command+G 
水 平分 布 对 象 ” ”ControltCommand+H 取消 分 组 图 层 ShifttrCommand+G 
垂直 分 布 对 象 Control+Command+V 查找 图 层 Command+F 


(7) 插件 相关 快捷 键 如 表 2-7 所 示 。 


表 2-7 
| 执行 人 人 S | 忆 莘 | tk 呈 人 | 


自 定 义 插件 


Control+Shift+K 


(8) 辅助 相关 快捷 键 如 表 2-8 所 示 。 


ET ET EE 


RT 

实际 大 小 

居中 画布 

缩放 所 选 

居中 所 选 
显示 图 层 列表 
显示 检查 器 
隐藏 图 层 和 检查 器 


操作 指南 


Command++ 
Command + 一 
Command+0 
Command+1 
Command+2 
Command+3 
Option+Command+1 
Option+Command+2 
Option+Command+3 


自 定义 快捷 键 


了》 视频 : 视频 \ 操 作 指南 \ 自 定义 快捷 键 .mp4 


[ONE3 在 应 用 程序 中 选择 “系统 偏好 设置 "选项 , 如 图 2-24 所 示 , 将 其 打开 , 然后 在 “系统 偏好 设置 ” 
中 选择 “键盘 ”选项 ， 如 图 2-25 所 示 。 














图 2-24 
GZ 单 击 进入 键盘 设置 ,切换 到 “快捷 键 ”选项 
用 快捷 键 ”选项 ， 然 后 单 击 右 侧 的 “+” 按 钮 ， 如 
[GOSE2 在 弹出 对 话 框 的 “应 用 程序 "下拉 列 表 中 选 








再 次 运行 Toggle118N 


演示 模式 

隐藏 工具 栏 

全 屏 

显示 /隐藏 标尺 
显示 /隐藏 像素 
显示 / 隐藏 像素 网 格 
显示 / 隐藏 网 格 
显示 / 隐藏 布局 
移动 画布 


Control+Shift+R 


Command+. 
Option+Command+T 
Control +Command+F 
Control+R 

Control+P 

Control+X 

Control+G 

Control+L 

空格 键 + 按 鼠 标 拖 动 
































醒 归 本 国 了 网 凋 @ 时 


ee 


oy ys eR ootdt 








卡 , 对话 框 如 图 2-26 所 示 。 在 该 选项 








图 2-27 所 示 。 
择 Sketch 选项 , 如 











图 2-25 
卡 左 侧 选择 "应 











图 2-28 所 示 。 在 “菜单 标题 ” 








文本 框 中 设置 快捷 键 的 菜单 ， 标 题字 母 必 须 完全 一 致 。 单 击 “ 键 盘 快捷 键 ”输入 框 并 在 键盘 上 
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按 需要 设置 快捷 键 ， 如 图 2-29 所 示 。 














记 生 ”文本 本 汪 开关 共和 法 “5 





CT a 






































国 Launchpad 与 Co | | 回 Mission conool ~ 
国 显示 通知 中 心 
EL | 回 。 打开 /大半 如 扩 检 式 
回答 入 洁 | 加 。 应 用 程序 窗口 ~ 
书 与 下 人 忌 妥 加 。 呈 示 来 面 FT 
全 OA Deshboard ma 
© St @ -Mission Control 
四 向 移动 一 个 spa ~ 
Ce 加 。。 同 克 动 一个 Spa 3 
口 切换 到 桌面 1 
Ey T 
全 角 生 把 抽 : 在 加 中 和 对 庄村 中 ， 按 下 Tab 刍 在 以 下 把 抽 之 同 本 动 入 入 点 ; 全 失控 制 ， 在 可 口 对 放生 中 ， 按 下 Tib 刍 在 以 下 控制 之 问 移动 让 集 训 : 
全 公文 二 相 和 四 表 > 二 nl 
所 有 控制 一 所 有 扫 制 
这 下 Conanr7 机 此， canwarF7 来 此- 
键盘 电池 电量 ;于 100% 设 乔 蓝牙 键盘 一 9 慎 枉 电 污 电 重 : 二 时 100% 设置 黄 牙 键 瘟 .… 
图 2-26 图 2-27 
9 @ 全 全 . a 
碳 用 程 夯 : 。 多 Sketch 日 而 用 程 厚 : | 富 Sxetch 目 
| -| | me 
: TELL ET 
| 便 盘 避 委 名 | 。 键盘 忆 扫 刍 1 
! 加 1 mE | 
和 避 区 用 人 ol 
服务 dd 
©@ Spotignt ® spotight 
全 有 功能 和 In 功 双 
内 应 用 亿 反刍 六 可 用 快 拥 角 
十 十 
爹 刍 息 控制 : 在 国 口 和 对 话 恒 中 ， 按 下 Tab 键 在 以 下 控制 之 癌 移动 健 有 焦点 : 全 键盘 控制 : 在 面 口 和 对 话 杠 中 ， 按 下 Tab 键 在 以 下 控制 之 问 移动 键盘 焦点 : 
人 各 广 本 性 N 表 介 Rz# 丰 PDF 于 
门 所 有 苇 制 9 
届 下 Contrale7 江上 care 让 RE 
外 组 电 沿 电量 : [100% ELEELTE 记 生 由 电量 。 国 100% EL TELT 
图 2-28 图 2-29 


IORE3 单 击 “ 添 加 ”按钮 ， 完 成 快捷 键 的 添加 ， 在 Sketch 中 使 用 刚才 自 定 义 的 快捷 键 ， 如 
图 2-30 所 示 。 如 果 需 要 删除 快捷 键 ， 只 需 在 快捷 键 列表 中 选中 需要 删除 的 内 容 ， 然 后 单 击 下 方 


的 “一 ”号 按钮 即 可 ， 如 图 2-31 所 示 。 











妇 盘 中 沾 电 重 : EE) 100% EE EE 





S00 < > 加 去 EE [TE FT 二 局 扫 
全 二 “文本 攻 SEE 总 和 法 ” 号 名 各 ”文本 医大 多 入 法 WS 
着 要 更 改 快 捷 乌 ， 博 这 择 它 ， 点 技 组 合 馆 ， 然 后 乌 入 新 健 ， 大 要 更 修 亿 捷 外 ， 洒 和 择 它 ， 点 按 纺 合 当 ,然后 健 入 新 错 、 
"所 有 应 用 程序 
口 。。 骂 示 可 助 菜单 
v Sheteh 
新 过 1 














ELTELT [了 





图 2-30 
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于 汪 人 3 Sketch 是 否 能 蔡 代 Photoshop 


根据 上 述 内 容 的 讲解 ， 相 信用 户 对 Sketch 有 了 一 定 的 了 解 ， 不 少 用 户 发 现 ， 它 的 功能 与 
Photoshop 基本 相似 ， 那 么 Sketch 是 否 能 够 蔡 代 Photoshop 呢 ? 

Sketch 和 Photoshop 是 两 款 定 位 完全 不 同 的 软件 ，Sketch 是 一 款 矢 量 软件 ， 而 Photoshop 
是 一 款 位 图 编辑 软件 。 在 Ul 设计 领域 中 ，Sketch 在 一 定 程度 上 可 以 代替 Photoshop， 且 因为 
Sketch 是 为 UI 设计 而 生 的 软件 ， 在 某 些 地 方 Photoshop 具有 绝对 的 优势 。 

Sketch 的 位 图 处 理 功 能 非常 少 ， 仅 用 Sketch 可 以 设计 出 非常 优秀 的 UI 界面 。 但 是 如 果 需 
要 对 位 图 进行 处 理 ， 或 者 要 进行 很 精细 的 超 写实 的 图 标 绘制 还 是 推荐 使 用 Photoshop。 


知识 链接 ”者 Ei3 

Sketch 中 的 画布 尺寸 是 无 限 的 ， 如 果 想 在 画布 中 设置 一 个 固定 的 边框 ， 可 以 通过 插入 一 个 画 
板 来 实现 。 在 设计 移动 应 用 界面 时 ， 很 多 设计 师 会 为 应 用 的 每 一 屏 都 创建 一 个 画板 ， 然 后 排列 出 
来 以 便 查看 。 这 样 ， 设 计 师 能 够 快速 地 查看 当前 设计 中 的 界面 ， 如 图 2-32 所 示 。 
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图 2-32 


按 快 捷 键 【Command+. 】 或 者 执行 “显示 一 演示 模式 ”命令 可 进入 演 
示 模 式 。 在 该 模式 下 ， 画 布 布 满 整个 屏幕 ， 在 展示 设计 界面 时 可 以 获得 更 
好 的 显示 效果 。 





跳 转 页 面 经 常 在 启动 一 个 APP 
时 第 一 眼 映 入 眼帘 ,一般 都 有 个 “ 跳 
过 ”按钮 可 以 跳 过 这 个 广告 ， 有 的 
APP 在 点 击 广告 页 之 后 还 会 进入 另 
一 个 广告 页 面 ， 点 击 返回 可 以 进入 
首页 ， 其 通常 用 来 推广 某 一 阶段 的 
主推 活动 或 给 人 以 第 一 印象 的 整体 
呈现 ， 如 图 2-33 所 示 。 





移动 互联 网 之 路 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 








绘制 iOS 人 A 跳 转 页 面 
实战 源 文件 文件 \iO APP 跳 转 页 面 .sketch 


视频 : 2 章 \2.2.1.mp4、2.2.2.mp4、2.2.3.mp4 








案例 分 析 设计 分 析 色彩 分 析 
本 案例 为 绘制 一 组 iOS 旅游 APP 跳 转 本 案例 以 当地 风 ” 主 色 : 
页 面 ， 以 宣传 一 个 旅游 胜地 为 主 ， 涉 及 了 形 。 景 为 底 图 ， 巧 妙 地 运 。 E] 
状 图 层 的 措 由 与 粘贴 、 填 充填 色 和 措 边 的 变 。 “用 文字 和 图 形 作为 点 。 文本 色 ， 
换 ， 插 入 文字 、 插 入 形状 是 本 案例 较为 频繁 。 和 线 的 元 素 构成 , 简 。 本 时 二 
应 用 的 技巧 ， 移 动 对 象 和 在 检查 器 中 修改 形 。 洁 得 体 ， 充 分 体现 了 





状 图 层 的 参数 也 有 体现 。 安详 与 静 谥 的 特点 ， ee 0 
通过 本 案例 的 学 习 ， 用 户 可 以 使 用 简单 。 给 人 以 放松 心情 的 感 。 于 记过 声色， 思想 使用 
的 文字 和 图 片 制作 简单 的 手机 界面 ， 并 能 初 ，。 觉 ， 引 人 向 往 。 ; 
步 认识 在 Sketch 中 使 用 蒙 版 的 效果 。 人 
一 种 祥和 和、 幽静 的 感 。 


2.2.1 iOS 旅游 APP 跳 转 页 面 第 1 页 


Sketch 主要 是 用 来 绘制 矢量 形状 的 ， 并 不 是 一 个 位 图 编辑 工具 ， 因 此 能 在 位 图 上 做 的 工作 十 
分 有 限 ， 经 过 几 次 升级 后 ， 最 新 的 版 本 也 仅仅 能 做 到 选区 、 魔 棒 、 反 向 、 剪 裁 、 填 色 和 矢量 化 几 
种 编辑 手段 ， 这 些 方法 的 使 用 将 在 后 面 界面 设计 的 章节 中 详细 讲解 。 这 里 仅仅 向 用 户 演示 如 何 将 
图 片 放 轩 到 男 布 中 ， 让 用 户 了 解 到 在 Sketch 中 也 有 蒙 版 功能 。 
















用 相同 的 方法 打开 文 
;Sketch ， VE Wai 


































































i: 单 击 工具 栏 上 的 “插入 ”按钮 ,依次 选择 “iOS | 
; 用 户 界面 设计 一 iPhone X 一 Status Bars” | 
i 项 ， 将 Status | Bars 组 件 移动 到 合 适 的 位 置 


























， 在 弹出 的 | 快 接 菜 单 中 选择 ， “粘贴 过 
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选择 “形状 ”图 层 ,执行 “插入 一 图 片 ”命令 执行 “插入 一 :形状 “ 拒 形 ” 命令 , 按 住 [Shift] 
| 将 “ 跳 转 背景 01.tf” 插 入 画布 中 ， 可 以 看 到 | ee 取消 多 选 “ 描 边 ”， 
上 ]5 “插入 的 图 片 默 认 处 于 “形状 ”图 层 | 
”| 其 创建 蒙 版 。 拖 动 界定 框 的 控制 
片 的 大 小 。 





























1 3 





i 
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i 快 捷 菜 菜单 中 选择 “ 忽 
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”在 右 侧 的 检查 器 面板 中 选择 一 个 较 粗 的 
中 日“ 体 ， 设 置 文本 参数 ， 注 意 修改 “ 行 高 ”的 
值 为 28。 

















继续 插入 文字 ， 在 检查 器 面板 中 














:| oe 
























续 输入 文字 ， 在 检查 器 面板 中 设置 各 项 
图 层 ， 取 消 勾 选 “ 描 边 ” 












i 的 高 和 宽 是 10， 另 外 两 个 














| 选择 iPhone X 画板 ， 修 改 音 影 颜色 为 黑 | 
色 ， 插 入 3 个 圆 角 矩形 ， 第 1 个 贺 角 矩形 










































角 和 矩形 的 宽 和 高 ; 
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Sketch 的 系统 偏好 设置 


系统 偏好 设置 是 Sketch 新 用 户 容易 忽略 的 地 
方 ， 实 际 上 系统 偏好 设置 中 的 一 些 选项 会 对 设计 产 
生 较 大 的 影响 。 

执行 “Sketch 一 偏好 设置 ”命令 ， 打 开 “ 偏 
好 设置 ”对 话 框 ， 其 快捷 键 为 Command+，]】 ， 
如 图 2-34 所 示 。 


》1. “通用 ”选项 卡 一 一 自动 保存 

勾 选 “编辑 时 自动 保存 文件 ” 复 选 框 ， 即 可 开 
启 自动 保存 功能 ， 开 启 该 功能 后 ， 系 统 每 过 一 段 时 
间 自 动 保 存 一 次 当前 的 文档 。 
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偏好 设置 


国情 。 匡 件 ”资源 库 预 设 Cloud 


自动 保存 :” 回 编辑 对 自动 保存 文件 





导入 矢量 图 : 以 位 图 图 层 插入 PDF 和 EPS 文件 


按 侍 Option 量 反 转行 为 . 
导出 画板 : 从 左 到 右 日 


选择 导出 为 PDF 画板 到 硕 序 。 


Sketch Mirror: 





己 连 接 的 iOS 设备 会 自动 与 Mac 显示 相同 的 页 板 、 





图 2-34 
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》 2. “通用 ”选项 卡 一 一 导入 矢量 图 

















人 勾 选 “以 位 图 图 层 插入 PDF 和 EPS 文件 ” 复 选 框 后 ， 当 导入 PDF 或 EPS 格式 的 文件 时 ， 















































是 以 位 图 的 形式 打开 的 。 当 取消 勾 选 此 复 选 框 后 ，Sketch 会 解析 矢量 文件 的 路 径 ， 使 路 径 变 得 可 
以 编辑 ， 如 图 2-35 所 示 。 
, = ， 
HANDSHAKE x HANDSHAKE 
图 2-35 


》3. “画布 ”选项 卡 一 一 缩放 


系统 偏好 设置 的 “画布 "选项 卡 中 的 内 容 如 图 2-36 所 示 , 该 选项 卡 用 于 一 些 和 画布 相关 的 设置 。 
勾 选 “缩放 动画 ” 复 选 框 ， 在 进行 缩放 时 会 有 缩放 动 效 。 勾 选 “ 放 大 所 选 ” 复 选 框 ， 进 行 画 
布 缩放 时 ， 始 终 以 当前 选中 图 层 为 中 心 进行 缩放 ; 若 未 色 选 该 复 选 框 ， 则 以 当前 屏幕 上 的 





中 心 进行 缩放 。 勾 选 “缩放 到 


中 心 进行 的 缩放 都 将 回 到 缩放 前 画布 的 位 置 ， 否 则 难 回 到 画布 中 心 。 





》4. “图 层 ” 选 项 卡 一 一 新 建 分 组 





在 系统 偏好 设置 中 ，“ 图 层 ”选项 卡 用 于 设置 和 图 层 相关 的 内 容 ， 如 图 2-37 所 示 。 勾 


击 新 分 组 时 


分 组 时 选中 分 组 内 容 ” 复 选 框 ， 在 画布 中 单 击 某 个 基本 图 层 会 默认 首先 选择 该 图 
当然 ， 如 果 不 勾 选 该 复 选 框 ， 也 可 以 在 按 下 键盘 上 的 【 Command 】 键 的 同时 单 击 基本 


选中 分 组 内 容 ” 复 选 框 后 ， 可 以 直接 选择 图 层 组 中 的 基本 图 层 ; 如 果 未 勾 选 “ 


画布 为 


画布 之 前 的 位 置 ” 复 选 框 ， 当 缩放 至 实际 尺寸 时 ， 无 论 之 前 以 谁 为 


选 “ 点 
点 击 新 














层 所 在 的 图 层 组 。 








图 


接 选 择 该 图 层 ， 用 户 可 以 根据 个 人 习惯 选择 是 否 勾 选 该 复 选 框 。 





层 来 直 























吕 偏好 设置 偏好 设置 
一 全 
Oo 口 回回 @ 于 @ 
a Wl] WR Mf Wa MR Cou 2 
缩放 :加 缩放 动画 匹配 像素 :加 匹配 图 层 和 点 到 像素 边缘 
国 帮 类 所 六 新 建 分 组 : 加 点 击 新 分 给 时 选中 分 组 内 容 
加 统 放 到 画布 之 前 的 位 置 这 允许 你 直接 从 午 矶 中 选择 分 组 内 的 对 象 ， 而 不 要 先 打开 组 。 如 
和 让 到 实际 大 小 时， 上 默 认 铺 况 下 Sketch 从 中 心 闫 小 ,相反 , 它 村 不 名 选 ， 您 仍 线 可 以 使 用 Command + 点 击 来 选择 分 组 中 的 图 
也 可 以 编 放 四 之 前 的 大 小 。 用 
编辑 形状 :加 点 击 选择 相对 端点 时 关闭 路 径 
微调 : 移动 对 象 1 px 使 用 方向 摆 
Sr -- 复制 偏 移 复 制 的 图 层 
移动 对 象 【 ol | px 使 用 Shift + 方向 键 
回 重 命名 复制 的 图 层 
参考 线 :| 拼合 位 图 : 加 到 ex 
颜色 到 @2x 
图 2-36 图 2-37 


》 5. “图 层 ”选项 卡 一 一 复制 


“复制 ”选项 组 中 包含 两 个 选项 ， 勾 选 “ 偏 移 复制 的 图 层 ” 复 选 框 ， 在 进行 图 











制 的 图 























层 会 相对 于 原 图 层 有 10px 的 位 移 ， 左 侧 为 未 勾 选 该 复 选 框 时 复制 图 层 的 效果 ， 如 




















层 复制 














图 





所 示 。 右 侧 为 义 选 该 复 选 框 时 复制 图 层 的 效果 ， 如 图 2-39 所 示 。 
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图 2-38 图 2-39 















































勾 选 “ 重 命名 复制 的 图 层 " 复 选 框 ,在 对 图 层 进行 复制 时 (Command+D) ,复制 的 图 层 命 名 为 " 原 
图 层 名 +Copy+ 次 数 ”， 如 “Star Copy 2”， 如 图 2-40 所 示 。 若 取消 勾 选 该 复 选 框 ， 则 复制 
图 层 的 名 字 和 原 图 层 一 致 ， 如 图 2-41 所 示 。 
页 面 1v 问 页 面 1 Y 回 

位 Star Copy2 

位 Star Copy 六 Star 

位 Star 他 Star 

图 2-40 图 2-41 














“拼合 位 图 " 选项 可 以 选择 当 将 图 层 转换 为 位 图 时 , 是 转换 为 1 倍 尺 寸 大 小 还 是 2 倍 尺 寸 大 小 ， 
若 我 们 用 1 倍 尺寸 设计 Retina 设备 上 的 界面 时 ， 建 议 设置 为 2x 尺寸 ， 避 免 模糊 。 
》6. “插件 ”选项 卡 
“插件 ”选项 卡 中 会 显示 用 户 在 本 机 中 安装 的 第 三 方 插 件 ， 如 图 2-42 所 示 。 如 果 安 装 的 插 


件 较 多 ， 想 要 寻找 某 一 个 插件 时 ， 可 以 使 用 左下 角 的 搜索 功能 ， 单 击 窗口 右 下 角 的 “获取 插件 ” 
按钮 ， 可 以 跳 转 到 网 页 中 ， 在 网 页 中 可 以 获取 更 多 的 插件 ， 如 图 2-43 所 示 。 
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第 三 方 开发 者 为 Sketch 创建 的 插件 


Sketch NBN by @lguangming 
图 :seenena nu-angumoepuon tor skaten 





Shetch gn To ord Sketcn Deviools 




















和 到 插件 _ seeeven sion oot 








图 2-42 图 2-43 


》7. “资源 库 ” 选 项 卡 
“资源 库 ” 选 项 卡 在 之 前 的 版 本 中 并 没有 出 现 过 ， 是 目前 最 新 版 本 的 Sketch 中 新 添加 的 。 其 
作用 是 放置 Sketch 资源 ， 如 图 2-44 所 示 。 单 击 “ 了 解 更 多 ”按钮 ， 打 开 Sketch 官网 的 资源 页 
而 ， 用 户 可 以 在 这 里 寻找 需要 的 资源 ， 如 图 2-45 所 示 。 
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三 柄 上 二 


资 庆 库 可 以 让 你 在 其 他 文档 中 使 用 它 的 绍 件 - Contents 


as 


| 
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图 2-44 图 2-45 
单 击 左下 角 的 设置 按钮 ， 可 以 禁用 资源 库 ， 如 图 2-46 所 示 。 单 击 资源 列表 右 侧 的 眼睛 图 标 ， 
可 以 直接 打开 资源 模板 文件 ， 如 图 2-47 所 示 。 
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Ls] 





四 全 





黄 源 库 可 以 让 你 在 其 他 文档 中 合用 它 的 组 件 . 

















图 2-46 
》8. “ 预 设 ”选项 卡 
“ 预 设 ”选项 卡 被 应 用 到 切片 、 画 板 和 可 导出 的 图 层 中 ， 极 大 地 简化 了 之 前 烦琐 的 操作 ， 如 























图 2-48 所 示 ， 单 击 左下 角 的 “+” 按 钮 ， 自 动 添加 切片 预 设 。 如 图 2-49 所 示 ， 选 择 某 一 个 预 设 
选项 ， 单 击 “- ”按钮 可 以 删除 该 预 设 选 项 。 
偏好 设置 偏好 设置 
加 加 图) [S] CD 入 加 国 | 二 (®] CDE I 
通用 夯 布 图 属 插件 资源 库 通用 而 布 。 男 展 。 插件 ”资源 库 . 
预 设 可 以 被 应 用 到 切片 、 画 板 和 可 导出 的 图 展 。 预 设 可 以 被 应 用 到 切片 、 画 板 和 可 导出 的 图 层 。 
© st ‘os + O mx + 
CEN | | -= Sa 
了 Android es es ee 了 Android 人 
RE ER 
58 主 ]= 
图 2-48 图 2-49 
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》 9. Cloud 选项 卡 


Cloud 选项 卡 在 之 前 的 版 本 中 也 没有 出 现 过 ， 随 着 科技 的 高 速 发 展 ，Sketch 也 紧 跟 时 代 脚 步 ， 
该 设置 将 用 户 制作 好 的 文件 进行 上 传 , 与 其 他 人 进行 分 享 , 如 图 2-50 所 示 。 单 击 “ 了 解 更 多 ”按钮 ， 







































































跳 转 到 Sketch 官网 了 解 更 多 关于 Cloud 的 相关 内 容 ， 单 击 Create Account 按钮 ， 创 建 账户 ， 
单 击 Sing In 按钮 跳 转 到 注册 页 面 ， 如 图 2-51 所 示 。 
和 ~ = ey 
[0] [和] 周 ](@] C9 至 站 aw” | ee 
而 而， 轩 居所 全 天才 clove | 让 e 
人 到 sketcncoudeea EEC | na 
ed se SO 
Create Account… Sign In... 
a 日 
图 2-50 图 2-51 


2.2.2 iOS 旅游 APP 跳 转 页 面 第 2 页 


本 案例 向 用 户 展示 Sketch 中 对 文字 的 处 理 方法 ，Sketch 也 可 以 插入 单 排 文 字 和 段落 文本 ， 
并 且 可 以 设置 对 齐 方式 ， 如 图 2-52 所 示 。 























在 “图 层 ” 面板 上 选择 iPhone X 画板 选项 ，| 
: 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “复制 ”选项 ，; 
| 可 以 看 到 复制 出 一 个 iPhone X Copy 画板 。 | 





































按 住 [ Shift ] 键 单 击 多 个 图 
| 同时 选中 并 右 击 ， 在 弹出 的 
| “删除 ”选项 。 















































重 入 ”按钮 ， 在 弹出 
| 户 界面 设计 一 iPhon 
i X 一 Status Bars 一 Status Bar(White)” 选 项 。 














































































U : 将 “ 跳 转 背景 0201.tif” 拖 入 画布 中 ， | 
i 入 的 图 片 将 默认 置 于 “形状 ”图 层 的 上 一 层 | 
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跳 转 背景 0201. 














图 层 的 填充 颜色 为 
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上 的 “插入 

















h 先 





择 “ 形 状 一 矩形 


”按钮 ， 在 弹出 的 菜 
”选项 ， 在 画布 中 拖 
设置 参数 











转 背 景 0202.tif ”插入 画板 中 ， 














的 快捷 菜单 中 选择 “忽略 底 





























片 和 形状 的 大 小 和 位 











度 为 50%。 | 
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移动 互联 网 之 路 一 Sketch+Xcode 移动 UI 








没有 文本 样式 
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操作 指南 
3 视频: 视频 \ 操作 指南 \ 修改 参考 线 颜 色 .mp4 
[NE 启动 Sketch 软件 ， 执 行 “Sketch 一 偏好 设置 ”命令 ， 


修改 参考 线 颜 色 





























Resing 


没有 共事 性 式 


不 肖 昌 


FeHeont | ; 











wm | | 
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图 2-53 所 示 ， 打 开 “ 偏 好 设 


» 


























对 话 框 ， 单 击 “ 画 布 ”选项 卡 ， 如 图 2-54 所 示 。 
[3 偏好 设置 
DO MO 
六 四 时 文件 编辑 插入 全 
关于 & 注 册 .… 握 放 ;加 弓 放 动画 
回放 大 所 选 
回 址 放 到 画 和 之 可 的 位 时 ， 本 
赏 调 ; 欧 动 对 象 1 px 使 用 方向 键 
多 考 绪 : 。E 
图 2-53 图 2-54 
单 击 “颜色 ”图 标 ， 打开 “颜色 ”面板 ， 该 面板 中 有 “ 色 轮 ”“ 颜 色 滑 块 ” “色彩 图 案 ”“ 图 
片 图 案 ” 和 “铅笔 ”5 种 选择 颜色 的 方法 ， 如 图 2-55 所 示 。 单 击 “ 色 彩 图 案 ” 选 项 卡 ， 在 颜色 殉 
表 中 选择 Cyan 选项 ， 如 图 2-56 所 示 。 
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国 > 国 / 
图 2-55 图 2-56 
网 SE 关闭 “颜色 ”面板 ， 新 建 一 个 Sketch 空白 文档 ， 执 行 “显示 一 画布 一 显示 标尺 ”命令 ， 拖 

































































动 鼠 标 在 画布 中 创建 参考 线 , 如 图 2-57 所 示 。 可 以 看 到 参考 线 的 颜色 已 经 被 改变 , 如 图 2-58 所 示 。 
局 
取消 分 组 创建 组 件 
mm 100 155 200 
Ls 
图 2-57 图 2-58 
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通过 本 案例 ， 用 户 可 以 了 解 Sketch 中 文本 的 复制 与 形状 的 复制 及 再 编辑 。 在 编辑 器 中 ， 用 户 
本 以 用 年 形 六 的 汪 度 和 可 度 及 入 条 的 亿 轩 5 
















图 展 ”面板 上 双击 画板 名 称 ， 在 文本 框 
画板 名 称 进行 修改 。 








使 用 相同 的 方法 复制 第 3 个 画板 ， 得 到 


Phone X Copy 2 画板 。 


吧 [二 





























移动 互联 网 之 路 一 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 








按 住 [Command 】 键 在 
































i 行 多 次 单 击 , 同时 选择 多 个 









































































































































击 工具 栏 上 的 “插入 ” 按钮 ， 在 菜 单 中 先 修改 形 Oval 的 宽 和 高 为 6， 修改 形状 
择 “文本 ” 选项 ， 在 画布 中 单 击 输入 文字 。 图 层 Oval Copy 2 的 宽 和 高 为 10。 
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上 瑟 池 39> 图 标的 源 文件 格式 








一 般 来 说 ， 如 果 Mac 在 联网 状态 下 ， 打 开 Sketch 后 会 
界面 ， 单 击 Install Update 按钮 即 可 在 线 下 载 更 新 。 





自动 检查 更 新 ， 如 果 有 更 新 就 会 弹出 








如 果 没有 进行 自动 检测 升级 ， 或 者 在 弹出 更 新 提示 界面 时 不 小 心 单 击 “Skip This Version” 
按钮 ， 也 没关系 ， 用 户 可 以 单 击 菜单 栏 上 的 Sketch 按钮 ， 在 弹出 的 菜单 选项 中 选择 “检查 更 新 ” 
选项 即 可 , 如 图 2-59 所 示 。 如果 使 用 的 Sketch 已 经 是 最 新 版 本 , 则 会 弹出 如 图 2-60 所 示 的 对 话 框 。 





























【 ET 文件 编辑 “插入 























偏好 设置 … ， 

得 扯 末 [… 你 已 经 更 新 到 最 新 版 了 ! 
隐藏 Sketch 8H Sketch 47.1 是 当前 最 新 的 版 本 。 
隐 茂 其它。 38H 
全 部 显示 
退出 Sketch 3%Q 

图 2-59 图 2-60 


让 让 A5 拷 > Sketch 汉化 











从 官网 上 下 载 的 原版 是 英文 版 本 的 ， 不 少 用 户 肯 定 希 望 界 





面 能 够 汉化 ， 本 书 中 使 





的 Sketch 
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是 汉化 后 的 样子 ， 用 户 可 以 通过 插件 进行 汉化 操作 。 

需要 告诉 用 户 的 是 ，Sketch 的 版 本 更 新 相对 比较 快 ， 该 团队 目前 把 研发 重点 放 在 产品 本 身上 ， 
所 以 暂时 没有 多 国语 言 支持 的 版 本 。 

随 着 Sketch 在 国内 的 影响 力 持续 增 大 ， 国 内 越 来 越 多 的 Sketch 相关 的 网 站 和 论坛 及 著作 的 
出 现 ， 让 学 习 Sketch 变 成 一 件 很 容易 的 事情 ， 加 上 Sketch 软件 本 身 便 非常 容易 掌握 ， 而 且 如 果 
用 户 使 用 快捷 键 进行 操作 ， 软 件 的 语言 已 经 不 是 问题 了 。 


.新 版 本 的 Sketch 文档 无 法 在 旧版 本 中 打开 ， 在 大 版 本 的 升级 中 也 会 带 来 全 
新 的 功能 ， 而 版 本 之 间 的 迭代 也 把 握 得 非常 好 ， 基 本 上 不 会 产生 什么 新 的 
学 习 成 本 ， 所 以 建议 用 户 始 终 让 Sketch 保持 最 新 版 本 。 


本 章 从 介绍 Sketch 软件 开始 ， 讲 述 了 Sketch 的 界面 、Sketch 设计 优势 、Sketch 的 安装 与 
启动 ， 通 过 制作 Apple Watch 界面 和 制作 iPhone 跳 转 页 面 ， 讲 解 如 何 进行 插入 形状 和 图 片 ， 以 
及 Sketch 易于 操作 的 特点 。 

用 户 需要 了 解 UI 设计 不 仅 是 从 软件 操作 的 技术 层面 上 要 做 到 纯熟 和 精练 ， 在 设计 知识 和 理念 
方面 也 要 追求 物 尽 其 美 ， 学 会 从 更 深层 次 地 思考 UI 设计 的 宗旨 和 一 个 作品 的 含义 。 

本 章 通 过 2 个 综合 案例 、6 个 应 用 案例 、5 个 操作 指南 和 大 量 的 基础 知识 讲解 ， 使 用 户 对 
Sketch 软件 有 全 面 的 知识 和 基础 的 了 解 。 


衡 保 





线 框 原型 是 产品 设计 的 保 真 呈 现 方式 ， 是 产品 设计 和 开发 中 寻 


本 章 知识 点 
绘制 计 步 APP 线 框图 
首页 


绘制 天 气 APP 线 框图 























度 和 速度 。 下 面 通过 绘制 一 个 计 步 APP 线 框 











[ 齐 




















来 展示 其 绘 


要 的 工具 ， 可 以 帮助 设计 师 平 
过程 和 效果 ， 如 图 3-1 所 示 。 
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al Sketch 全 9:41AM 下 100% mm 
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图 3-1 
线 框图 











中 | 








要 的 部 分 。 线 杠 





[出 








由 线 框 、 无 色 但 有 灰 度 的 方块 、 文 字 








的 绘制 不 用 在 意 细 枝 未 节 ， 一 定 要 表达 出 设计 思想 ， 不 能 漏 掉 任何 
、 线 条 及 箭头 构成 。 








第 3 章 使 用 Sketch 绘制 线 框图 





有 绘制 计 步 APP 线 框 图 首页 
SH 源 文 件 : 源 文件 \ 计 步 APP 线 框图 sketch 


视频 : 视频 \ 应 用 案例 \ 第 3 章 \3.1.1.mp4、3.1.2.mp4、3.1.3.mp4、3.1.4.mp4、3.1.5.mp4 





案例 分 析 结构 分 析 

本 案例 为 绘制 APP 计 步 线 框图 , 随 着 全 民 健身 成 为 一 种 趋势 ， 本 案例 从 结构 上 分 为 三 部 分 ， 
计 步 APP 成 为 必 不 可 少 的 一 个 运动 软件 , 现 如今 已 经 被 广泛 使 用 。 ”第 一 部 分 为 运动 步 数 、 公 里 数 和 

本 案例 从 新 建 和 保存 文件 开始 ， 使 用 插入 模板 和 模板 组 件 、 消耗 热量 ， 在 整体 结构 中 突出 显 
插入 和 矩 形 、 插 入 椭圆 和 插入 文本 等 工具 ， 介 绍 了 如 何 使 用 检查 器 。 ” 示 ; 第 二 部 分 为 睡眠 信息 、 心率 、 
设置 文字 、 形 状 和 参数 选项 。 通 过 本 案例 用 户 可 以 了 解 线 框图 的 。 ”运动 时 间 统 计 和 体重 等 信息 ， 结 
基本 结构 和 绘制 方法 ， 能 够 通过 对 文字 和 形状 的 基本 操作 完成 线 。” 构 清晰 且 一 目 了 然 ; 第 三 部 分 为 
框图 的 绘制 。 标签 导航 ， 图 文 标注 简洁 明确 。 


Ez 人 寺 P> 线 框图 的 基本 概念 


线 框图 可 以 从 单个 页 面 进行 分 析 ， 也 可 以 从 一 
组 页 面 进行 分 析 。 线 框图 可 以 绘制 得 很 粗 ， 仅 向 
人 们 展示 页 面 布 局 信息 ， 也 可 以 绘制 得 很 细 ， 能 
让 人 们 看 懂 每 个 页 面 的 各 板块 都 由 什么 组 成 ， 如 
图 3-2 所 示 。 
线 框 原型 在 视觉 上 很 有 局 限 性 。 通 常 由 线条 、 
方 框 和 灰 阶 色彩 构成 。 一 个 简单 的 线 框 原型 最 终 由 
图 片 、 视 频 和 文本 等 内 容 构成 ， 设 计 师 会 在 被 忽略 的 
地 方 使 用 占 位 符 来 标明 ， 图 片 则 通常 被 带 斜 线 的 线 杠 





























来 蔡 代 , 文本 会 按照 排版 用 一 些 标识 性 的 文字 所 蔡 代 。 -上 
如 图 3-3 所 示 为 一 个 简单 的 线 框 原型 。 ed| 
Bes 


:有 了 线 框图 ， 设 计 人 员 便 可 以 思考 如 
59 何 进行 设计 ， 并 可 以 对 照 需求 文档 查 





看 该 页 面 功能 是 否 已 经 完整 ， 程 序 
员 便 可 以 开始 搭建 产品 框架 等 工作 。 





3.1.1 新 建 并 保存 文件 


Sketch 拥有 自动 保存 功能 ， 以 此 能 挽回 工作 中 系 
统 裔 省 的 局 面 ， 无 论 做 什么 设计 ， 都 要 从 新 建 一 个 文件 
开始 ， 设 置 文件 的 存储 路 径 在 Sketch 中 也 极为 方便 ， 甚 至 可 以 设置 存储 样式 ， 使 用 户 能 够 在 寻找 
文件 时 更 高 效 、 更 快捷 。 





修改 文件 名 称 为 “ 计 步 APP 线 框图 ”， 
存储 路 径 和 标记 样式 。 





























移动 互联 网 之 路 一 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 





和 
+ 9 O82 








局 计 步 APP 线 框图 ~ 





Tags: 二 音色 : 
Where:” 庆 应 用 案例 四 Docked i 
































通常 用 户 在 新 建 完 文档 后 便 开始 设计 ， 但 是 建议 用 户 养 成 创 迁 百 就 进行 保存 的 习惯， 


防止 因 意 外 退出 而 造成 损失 。 

















24 汪汪; 省 ”其 他 新 建 和 保存 文件 的 方法 


打开 Sketch 软件 , 在 欢迎 界面 中 选择 并 创建 一 个 名 称 为 “未 命名 ”的 Sketch 新 文档 , 如 图 3-4 
所 示 。 也 可 以 使 用 快捷 键 [ Command+N ] 进 行 新 建 , 或 执行 “文件 一 新 建 "命令 进行 新 建 , 如 图 3-5 
所 示 。 
































Welcome to Sketch 




















Sketch 医 3 潭 编辑 插入 ”图 层 文本 排列 
© Ca . 新 建 ED 
从 模版 新 建 -| 
i re < - so | 
a 打开 最 近 的 文件 和 
关闭 %W 
保存 - 8%S 
复制 人 0%S 
重 命名 . 
移动 到 . 
pon an Eeting Fie- core EE 恢复 到 和 
图 3-4 图 3-5 


当 用 户 需要 保存 Sketch 文档 并 对 其 重 命名 时 , 可 以 使 用 快捷 键 { Command+S 】, 或 者 执行 “ 文 
件 一 保存 ”命令 进行 保存 ， 如 图 3-6 所 示 ， 保 存 时 Sketch 会 弹出 对 话 框 ， 如 图 3-7 所 示 。 


Sketch 县 20 对 编辑 插入 ”图 层 文本 
$8N 








eoe | 新 奸 
十 从 模版 新 建 > | 
i | 打开 .… 0 | 
my 人 | 三 : > 
| 关闭 %W 标记 : 
复制 0O%S 位 置 : ， 国 应 业 案例 
重 命名 ... 
移动 到 
恢复 到 p> 取消 保存 
图 3-6 图 3-7 
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设置 文件 存储 标签 和 存储 路 径 2 | 
为 文件 设置 标签 样式 可 利于 查找 ， 如 图 3-8 所 示 。 在 ™ | 


全 红色 


列表 中 有 8 种 颜色 标签 可 供用 户 选择 ， 选 择 文件 存储 路 径 “2 :和 
如 图 3-9 所 示 , 以 及 为 文件 设置 存储 路 径 如 图 3-10 所 示 。 os 
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图 3-9 图 3-10 


3.1.2 ”绘制 线 框图 的 状态 条 


画板 是 一 个 固定 大 小 的 画 框 ， 类 似 一 个 特殊 的 组 ， 更 像 一 个 屏幕 尺寸 ， 在 Sketch 中 已 经 有 足 
够 的 预 设 画 9 板 供用 户 使 用 。 






































! 于 “插入 一 画板 ” 命 命令 ， 选择“ 苹果 设备 ”: iPhone 8 手机 界面 的 轮廓 出 现在 画布 中 ， 勾 | 
0 i 中 iPhone 8 选项 。 1 0a i 选 左 侧 的 “背景 颜色 ” 复 选 框 ， 可 以 改变 画 ; 
| | 板 的 颜色 。 单 击 “+” 按 钮 ， 可 以 添加 当前 设 : 
革 果 设备 Bo- 
! iphone i i 
! FT 口 pes 375v667 | 本 
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| 趟 用 口 ea ro | Ps 一 
| 画 内 - Dame ozse| | 医 荔 ] 国 园 国 园 
: Apple Watch i Hex R G B A 
| EE Watensanm 27zrato| | ae 
: Lu s 和 : (TELILID 
: © Apple watch 42mm 312*390 : 国 国 因 国 国 国 口 品 
| 图 osmrmamasit » AppleTy i 国 国 故国 目 目 甩 国 
| Oe E 加 AppleTv 1920x1080 : 本 
回 Touch Bar 1085*30 : 中 
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.: 执行 “插入 一 iOS 用 户 界面 设计 一 Bars 一 将 插入 的 状 条 移动 到 iPhone 8 画板 的 顶部 | 
03 i Status 一 Black” 命 令 ， 在 iPhone 8 画板 ; 0: 位 置 。 : 





A 








“使 用 内 置 的 模板 也 十 分 简单 ， 只 要 选中 所 需 的 元 素 ， 复 制 并 粘贴 到 自己 的 设计 文档 中 即 可 ， 
Sketch 的 模板 均 使 用 Sketch 制作 而 成 ， 模 板 中 每 个 图 层 都 可 以 被 修改 和 查看 。 


:二 | 庆 P> 使 用 内 置 模板 
了》 视频 ， 视频 \ 操 作 指南 \ 使 用 内 置 模板 .mp4 


执行 “文件 一 从 模板 新 建 ” 命 令 ， 可 以 看 到 内 置 的 模板 从 上 到 下 包括 Android 图 标 设计 、 
iOS 应 用 图 标 、Material Design 和 网 站 设计 ， 如 图 3-11 所 示 。 
新 建 一 个 Material Design 模板 文件 ， 在 左 侧 列表 中 单 击 图 层 或 图 层 组 名 称 ， 画 布 中 相对 
应 的 模板 板块 会 被 选中 ， 而 如 果 在 画布 中 单 击 某 个 模板 板块 ， 图 层面 板 中 相应 的 图 层 也 会 被 选择 ， 
如 图 3-12 所 示 。 
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主讲》> 添 加 和 删除 自 定义 模板 
3 视频 : 视频 \ 操 作 指南 \ 添 加 和 删除 自 定义 模板 .mp4 


NE3 Sketch 为 用 户 提供 了 自 定义 模板 的 功能 。 新 建 一 个 Sketch 文档 ， 将 需要 做 成 模板 的 元 素 
提取 出 来 后 , 放 入 该 文档 中 , 然后 执行 “文件 一 保存 模板 ”命令 , 在 弹出 的 对 话 框 中 为 该 模板 命名 ( 支 
持 中 文 ) ， 完 成 后 单 击 OK 按钮 即 可 ， 如 图 3-13 所 示 。 之 后 用 户 就 可 以 从 “文件 一 从 模板 新 建 ” 
的 子 菜单 中 找到 该 模板 ， 如 图 3-14 所 示 。 

添加 自 定义 模板 后 ， 在 “从 模板 新 建 ”菜单 中 则 会 出 现 “ 在 Finder 中 查看 ”选项 ， 单 击 即 
可 打开 自 定义 模板 所 在 文件 来， 用 户 可 以 对 其 进行 修改 和 删除 。 











Ee 文本 排列 共享 所 
































DEEZ 
打开 .… %0 
y Android 图 标 设计 
打开 最 近 的 文件 Ee 应 用 图 要 
关闭 器 W| Material Design 
保存 路 S | ”网 站 设计 
个 8S 
一 在 Finder 中 查看 
移动 到 .. 
保存 模板 恢复 到 p 
模板 是 以 包含 设计 的 Sketch 新 文件 形式 打开 减少 文件 大 小 .。 
时 替换 丢失 的 字体 
| ey 
Rre: [ER |] | | ee" 
取消 [可 存 存 页 面 设置 … 人 OP 
| 打印 p> 
图 3-13 图 3-14 


模板 除了 让 设计 更 加 规范 外 ， 还 可 以 让 设计 整体 风格 统一 。 一 套 APP 具有 相同 
的 元 素 ， 如 各 页 面 中 相同 功能 的 按钮 ， 相 同 层级 的 文字 及 所 使 用 的 主要 颜色 等 。 
一 个 研发 团队 往往 有 多 位 设计 师 ， 如 果 把 这 些 相同 元 素 提取 出 来 做 成 模板 ， 则 可 
以 让 设计 师 设 计 出 来 的 界面 风格 更 加 统一 ， 提 升 团队 效率 。 





绘制 计 步 图 标 线 框 


Sketch 中 的 文本 使 用 原生 的 字体 泻 染 ， 当 用 户 的 作品 为 网 页 时 ， 可 以 肯定 作品 中 的 文字 都 是 
精准 清晰 的 。 当 添加 文字 图 层 时 ， 可 以 看 到 文字 图 层 已 经 被 选 定 ， 用 户 可 以 直接 输入 文字 进行 文 
子 图 展 的 策 洛 。 


| 的 行 。 -入 -天 | 


















| Re 
键 和 [ Alt ] 键 拖 动 鼠 标 绘制 正 加 


| 使 用 相同 的 方法 继续 拷贝 贺 形 ， 这 次 
| 选 “ 填 充 ” 复 选 框 ， 单 击 “ 措 边 设置 "按钮 ， 


鱼油 整 国 形 的 大 i 设 
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"ll Sketch 全 9:41AM 100% mm 
口 Cy 口 
局 9 
口 O 




























于 “插入 一 文本 ”命令 ， 在 画布 中 单 击 给 
四 5 | 入 文字 ， 并 设置 文本 颜色 、 字 体 大 小 和 字体 
等 参数 。 





| 使 用 相同 的 方法 继续 输入 文字 ， 将 两 个 文字 
| 图 层 同 时 选中 , 设置 对 齐 方式 为 “水 平 居中 ”。 




















9:41AM 下 100% Em 


1686 


1.1 公 里 l35 干 卡 : 
























| 继续 插入 其 他 文字 ， 设 置 文字 的 各 项 参数 并 
调整 位 置 。 


执行 “插入 一 形状 一 矩形 ”命令 
描 边 颜 色 ， 设 置 填充 颜色 。 
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elc 六 ~ 》 刀 J 征 . 、 月 J 
多 边 形 和 三 角形 ， 如 图 3-15 所 示 。 综 合 使 用 这 些 工具 ， 可 
以 绘制 出 丰富 多 彩 的 图 形 。 








局 山 24, ;2 ”插入 与 设置 文本 选项 


文字 图 层 是 构成 Sketch 中 最 常用 的 两 种 图 层 之 一 ， 文 
字 图 层 的 检查 器 如 图 3-16 所 示 ， 从 结构 和 作用 上 可 以 将 其 
分 为 6 个 部 分 。 
》1. “位 置 /大 小 /变换 ”选项 
“位 置 /大 小 /变换 ”选项 用 来 调整 一 个 文字 图 层 的 整 | 国 osmrrmat > 


















































体位 置 、 大 小 和 变换 。 需 要 注意 的 是 ， 它 并 不 能 调整 文字 的 | "x > 
大 小 ， 此 处 的 高 度 由 文字 图 层 中 的 文字 行 高 总 和 决定 。 对 图 3_15 
一 个 文字 图 层 进行 参数 设置 后 的 效果 如 图 3-17 所 示 。 
川 三 | 已 相 二 Hu 区 Joanir Naat 
位 置 [ee | 二 | | $ Regular 3] 
大 小 |as2 | le7 六 本 4 加 
豆 机 到 页 而。 大 小 
”mm 
图 3-16 
宝 ketch 是 一 款 易 用 | 全 一 
的 矢量 工具 , 它 让 Ul ，。 so | rm | | 语 妨 交 
' 设 计 更 简单 、 更 快 i | 
捷 、 更 高 效 。 | 
图 3-17 
》 2. 字体 的 设置 


此 处 设置 字体 的 快捷 键 为 Command 
+T】， 在 弹出 的 列表 中 直接 选择 即 可 ， Nv fm 
也 可 以 在 搜索 框 中 快速 搜索 字体 但 中 “SKetch 网 页 UI 设计 a 
Sketch 中 字体 名 均 为 英文 或 者 拼音 。 若 | Sketch 网 而 UI 调 计 
需要 中 文字 体 ， 在 英文 状态 下 按 拼音 输入 网 页 QUI 设 计 六 
搜索 即 可 ， 如 图 3-18 所 示 。 图 3-18 























移动 互联 网 之 路 一 一 Sketch+Xcode 移动 UI 与 交互 动 效 设 计 从 入 门 到 精 

















》3.“ 字 重 ” 选 项 |] 有 TS ~ 
“ 字 重 ”选项 用 于 设置 字体 样式 ， 根 据 字 | “Sketch 网 页 UI 设计 ”sg 
体 自身 的 样式 决定 ， 如 果 有 些 字体 只 有 一 种 样 as Uraigit 
i J i 字体 为 I Thin 
式 ， 此 选项 则 不 可 选 。PingFang SC 字体 为 Sketch 网 页 UI 设计 | 于 


iOS 默认 字体 ， 提 供 了 从 细 到 粗 6 个 样式 ， 从 

Sketch UI | 
上 到 下 依次 为 该 字体 的 6 种 字 重 样式 如 | Sketch 网 页 U 讼 计 
图 3-19 所 示 。 


》 4. 文本 选项 设置 

单 击 “ 选 项 ”齿轮 图 标 ， 打 开 选 项 设置 面 
板 ， 此 处 包含 文字 样式 装饰 效果 、 列 表 类 型 和 | Sketch 网 页 UI 设 计 
文本 变换 等 文本 样式 ， 单 击 选项 上 的 上 下 三 角 | Sketch 由 页 UIi 设 计 
形 按钮 可 以 在 列表 中 进行 选择 ， 从 上 到 下 依次 | Sketch 由 mulis 计 
为 3 种 画 线装 饰 效果 ，“ 数 字 编 号 ”“ 列 表 样式 ” | Sketeh 网 更 HH 设 计 
和 “大 写 ” 文 本 变换 样式 ， 如 图 3-20 所 示 。 “1 Sketch 网 页 UI 设计 


SKETCH 网 页 UI 设计 
》 5. 设置 文本 颜色 和 大 小 
单 击 “ 颜 色 ” 按 钮 ， 打 开 拾 色 器 ，Sketch 图 3-20 
中 准备 了 多 种 颜色 选项 ， 用 户 也 可 以 通过 在 拾 
色 器 窗口 中 移动 鼠标 和 滑 杆 选择 其 他 颜色 ， 如 图 3-21 所 示 。 打 开 “ 大 小 ”下 拉 列 表 ， 通 过 对 字 
号 的 选择 可 以 改变 文字 的 大 小 ， 如 图 3-22 所 示 ， 如 列表 中 没有 需要 的 字号 ， 也 可 以 在 该 处 进行 
手动 输入 。 











图 3-19 




















| | | ~ 
末 We Xm 
了 失色 各 
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Sketch 是 一 喜 易 用 的 矢量 工 
具 ， 它 让 UI 设计 更 简单 、 更 0 0 0 
快 拓 、 更 高 效 。 Sketch 是 一 款 易 用 的 矢 | ix 


量 工具 ， 它 让 UI 设计 更 简 - 
单 、 更 快捷 、 更 高 效 。 

















“图 间距 
[Ex za mm 

ee 

TY 全 局 闫 色 Tp 
四 加 司 帮 回国 国 国 混合 
rsdn 霓 充 
| 文人 基色 和 

图 3-21 图 3-22 


》 6. 设置 文本 的 对 齐 和 间距 
“对 齐 ” 选 项 用 来 设置 段落 文本 的 对 齐 格式 , 有 4 个 选项 , 分 别 为 左 对 齐 、 居 中 对 齐 和 右 对 齐 等 ， 
如 图 3-23 所 示 。“ 间 距 ” 选 项 则 用 来 调整 文本 的 字 间 距 、 行 间距 和 上段 间距 ,设置 参数 后 效果 如 图 3-24 
所 示 。 


























Sketch 是 一 款 易 用 的 矢量 工具 ， 它 让 UI 设 | 对齐 =» , 
守 更 隔音、 更 快捷 、 更 高， 二 = Sketch 是 一 款 易 用 的 矢 - 
Sketch 是 一 款 易 用 的 矢量 工具 ， 它 让 UI 设 一 一 = 量 工具 ， 它 让 UI 设计 更 _ 
计 更 简单 、 更 亿 熏 、 更 高 效 。 Ee - 简单 、 更 快捷 、 更 高 
sketch 是 一 各 易 用 的 矢量 工具 ， 它 让 Uli 向 中 o | 0 效 。 本 
6 计 更 简 意 、 更 快捷 、 更 高 效 . 3 县 9 人 和 区 下 
图 3- 23 图 3-24 


第 3 章 使 用 Sketch 绘制 线 框图 


提 示 
默认 情况 下 ， 绘 制 矩形 是 以 鼠标 左 键 按 下 的 位 置 为 中 心 ， 向 右 下 角 绘制 ， 
绘制 时 按 【 Option 】 键 ， 可 以 实现 由 中 心 向 外 绘制 矩形 。 


3.1.4 绘制 睡眠 状态 条 


在 绘制 形状 时 ， 使 用 形状 检查 器 面板 必 不 可 少 ， 检 查 器 面板 不 但 可 以 设置 单个 形状 的 填充 颜 
lg 还 可 以 对 多 个 形状 使 用 对 齐 与 分 布 的 快捷 操作 。 
:使 用 快捷 键 | Command+C ] 和 [ Command |' “| 使 用 相同 的 方法 拷贝 并 粘贴 相同 填充 颜色 的 | 


| 
中 | | +V ] 拷贝 并 粘贴 矩形 ， 改 变 矩 形 的 填充 颜色 ，| [] 口 ， 矩 形 ， 调 整 各 矩形 的 宽度 ， 插 入 文字 并 设置 
| 拖 动 定 界 性 调整 拭 形 大 小 。 人 | 






















































局! 二 ; 注 ” 使 用 形状 检查 器 


》1. “起 点 ”和 “终点 ”选项 

当 插入 “直线 "和 “箭头 "时 有 此 选项 , 插入 其 他 形状 无 此 选项 。 如 图 3-25 所 示 , 当选 择 一 个 “ 箭 
头 ” 形 状 时 ，X1 表示 起 点 在 画布 中 的 水 平 坐 标 ，Y1 表示 起 点 在 画布 中 的 垂直 坐标 ， 使 用 鼠标 拖 
动 起 点 改变 起 点 的 位 置 ，X1 和 Y1 的 数值 会 发 生变 化 。 






































将 光标 放 到 文本 框 中 ， 文 本 框 后 面 会 出 现 向 上 和 向 下 的 三 角 标 志 ; ， 单 击 此 处 可 对 起 点 或 终点 
的 位 置 进 行 微调 ， 如 图 3-26 所 示 。 
起 点 2 J 2 J 起 点 1215 -2465 
终点 ED | -ns es 终点 Fa Er | 
[E27 全 ET 3 
图 3-25 图 3-26 








调整 长 度 的 值 ， 可 以 通过 移动 终点 的 位 置 改变 “直线 ”或 “箭头 ”的 长 度 ， 如 图 3-27 所 示 。 
通过 单 击 两 个 翻转 按钮 ， 即 可 对 “直线 ”或 “箭头 ”进行 垂直 翻转 或 水 平 翻转 ， 如 图 3-28 所 示 。 






































起 点 215 | 1-2465 | 机 | 起 点 121.5 -186.15 
加 加 J 
ee 终点 [25882 | |-18615 Re 全 点 25882 | [-2465 
并 站 加 加 
外 天 C 150 ey > | 
Ca L3 
图 3-27 图 3-28 
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》2.“ 半 径 ” 选项 
当 插入 矩形 、 贺 角 和 矩形 和 星 形 时 有 “半径 ”选项 ， 插 入 其 他 形状 无 此 选项 。 在 对 矩形 和 贺 角 

































































和 矩形 形状 的 设置 中 ， 该 数值 影响 圆 角 弧 度 ， 数 值 越 大 则 圆 角 半径 越 大 ， 如 图 3-29 所 示 。 
E73 5 ; 咱 了 甸 390 | Es 
162 @ 162 | 大 小 161 all | 
到 高 高 
0 人 请 变换 0 从 | 禾 
旋转 要 转 旋转 翻转 
一 一 一 "5 | 半径 Flso | 
口 平滑 国 角 要 门 平滑 贺 角 
图 3-29 
当 “ 半 径 ” 选 项 的 数值 为 0 时 为 矩形 ， 当 数值 大 于 0 时 形状 为 圆 角 矩形 ， 用 户 可 通过 





滑 杆 调整 圆 角 半径 的 大 小 。 当 半径 数值 调整 为 最 大 值 100 时 ， 该 形状 为 圆 形 ， 如 图 3-30 
所 示 。 













































































E23 CE 377 ] om _ 
ln6z @ 162 162 ai62 | 
机- 下 可 
CE Cm er 
E 平滑 国 角 门 ) 平滑 贺 角 
图 3-30 
用 户 还 可 以 手动 输入 大 于 100 的 数值 ， 但 形状 的 状态 不 会 发 生 改 变 ， 如 图 3-31 所 示 。 
1 | [az7 5 _ [a7 | 6 
1162 a 162 62 |al162 
高 更 而 
Lo A >】 [lm Mh > 
E93 EL E29 ba 
。 o 
门 平滑 国 角 由 门 平滑 国 角 
图 3-31 
当 形 状 为 “ 星 形 ”时 ， 通 过 改变 半径 的 数值 可 以 改变 星 形 的 角度 ， 如 图 3-32 所 示 。 数 值 越 


大 则 角 越 大 ， 数 值 越 小 则 角度 越 小 。 
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》3.“ 顶 点数” 选项 
“顶点 数 ”选项 出 现在 多 边 形 星 形 中 ， 插 入 其 他 形状 无 此 选项 ， 该 选项 中 的 数值 代表 星 形 中 
角 的 个 数 , 如 五 角 星 的 数值 为 5, 六 边 形 的 数值 为 6, 该 部 分 其 他 选项 和 图 层 组 选项 相同 , 如 图 3-33 
所 示 。 
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LzE 上 计 > 设置 填充 和 描 边 选项 
3》 视频 : 视频 \ 操作 指南 \ 设置 填充 和 描 边 选项 .mp4 


除了 在 “直线 ”工具 的 检查 器 面板 中 没有 “填充 ”选项 ， 其 他 形状 均 有 “填充 ”和 “ 描 边 ” 选 
项 , “填充 ”选项 用 来 设置 形状 的 填充 颜色 ,“ 描 边 ”选项 用 来 设置 形状 的 描 边 颜色 , 如 图 3-34 所 示 。 
当 取 消 勾 选 “ 填 充 ” 复 选 框 时 , 填充 颜色 为 无 , 当 取消 义 选 “ 描 边 ” 复 选 框 时 , 描 边 颜色 为 无 , 如 图 3-35 


所 示 。 


























站 站 水 下 居中 证 2 站 吕 2 Bi 
图 3-34 图 3-35 
单 击 “ 描 边 属性 ”按钮 ， 打 开 “ 描 边 ”属性 对 话 框 ， 用 户 可 以 在 此 处 设置 形状 的 端点 样式 和 转 


折 点 样式 ， 如 图 3-36 所 示 。 还 可 以 通过 设置 虚线 和 | 间隙 的 数值 ， 绘 制 虚 线 ， 如 图 3-37 所 示 。 
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图 3-37 





二 山 直 :添加 阴影 和 内 阴影 
单 击 “ 添 加 阴影 ”按钮 后 ， 检 查 器 中 的 阴影 属性 显示 如 图 3-38 所 示 ， 颜 色 后 面 4 个 数值 分 
别 代表 阴影 在 X 轴 上 移动 的 距离 ( 正 数 为 右 移 ， 负 数 为 左 移 ) ; Y 轴 移 动 的 距离 ( 正 数 为 下 移 ， 
负数 为 上 移 ) ; 阴影 的 模糊 值 和 扩散 值 。 添 加 内 阴影 后 ， 检 查 器 中 内 阴影 的 属性 如 图 3-39 所 示 ， 
属性 数值 的 设置 方法 和 阴影 相似 。 
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者 > 绘制 线 框 原型 的 注意 事项 


了 》1. 巧 用 明暗 对 比 

绘制 线 框 原型 通常 是 使 用 线条 和 色 块 完成 的 。 页 面 虽然 简洁 明了 ， 但 对 于 各 个 模块 、 元 素 之 
间 的 优先 级 关系 却 不 能 很 好 地 表达 出 来 。 当 界面 元 素 较 复杂 时 ， 就 需要 反复 沟通 ， 浪 费 精力 的 同 
时 又 容易 产生 错误 。 

设计 师 可 以 通过 对 线 框图 原型 添加 明暗 对 比 效 
果 ， 突 显 界面 元 素 的 重要 级 关系 。 例 如 ， 深 色 的 是 重 278 上 午 09; a1 Sms 
要 的 ,需要 着 重 表现 ; 浅 色 的 就 是 次 级 的 , 不 太 重要 。 醒 ! 上 | 本 
如 图 3-40 所 示 为 单 色 的 线 框 原型 和 添加 了 明暗 对 比 EB : 


的 线 框 原型 。 


》2. 不 使 用 截图 和 颜色 

很 多 设计 师 为 了 能 够 更 清楚 地 表达 想法 ， 将 各 个 
竞争 对 手 的 页 面 截图 拼凑 成 一 个 页 面 。 这 样 做 看 似 很 四 
方便 ， 但 除了 影响 产品 人 员 的 想法 外 ， 对 于 视觉 设计 
师 也 是 一 种 灾难 。 

线 框图 上 大 量 使 用 色彩 ， 会 对 视觉 设计 师 造 成 不 
必要 的 干扰 。 局 部 的 小 面积 使 用 却 可 以 使 标注 更 加 突 
出 ， 主 题 更 加 明确 ， 如 图 3-41 所 示 。 


》 3. 标记 一 屏 高 度 图 3-41 

一 个 网 站 中 最 重要 的 就 是 第 一 屏 。 最 有 特色 、 最 
重要 的 内 容 ， 尤 其 是 重要 的 操作 按钮 尽 可 能 在 第 一 屏 内 显示 完全 ,不 然 会 对 转化 率 有 较 大 的 影响 。 

以 1024 x 768px 分 辨 率 为 例 ， 为 了 保证 页 面 可 以 正常 显示 ， 可 以 将 高 度 定 为 570pXx。 宽 松 
一 点 可 以 定 为 600px。 而 且 要 在 原稿 上 标明 高 度 ， 给 视觉 设计 师 作为 参考 。 当 然 ， 为 了 控制 第 一 
屏 的 高 度 ， 建 议 不 要 将 过 多 的 内 容 挤 在 一 起 。 


有 了 线 框图 ， 设 计 人 员 便 可 以 思考 如 何 进行 设计 ， 并 可 以 对 照 需求 文档 看 该 页 面 
功能 是 否 已 经 完整 ， 程 序 员 便 可 以 开始 搭建 产品 框架 等 工作 。 转 化 率 是 指 在 一 个 
统计 周期 内 ， 完 成 转化 行为 的 次 数 占 推广 信息 总 点 击 次 数 的 比率 。 也 就 是 指 进行 
相应 动作 的 访问 量 与 总 访问 量 的 比值 ， 是 衡量 网 站 内 容 对 访问 者 的 吸引 程度 及 网 
站 宣传 效果 的 重要 指标 。 














》 4. 合理 的 布局 和 间距 

在 开始 绘制 线 框 原型 前 , 要 及 时 与 视觉 设计 师 沟通 , 确定 设计 规范 , 例如， 最 小 间距 、 字 号 等 ， 
可 以 很 好 地 避免 不 必要 的 困扰 。 以 设计 规范 为 参考 ， 按 照 栅 格 规范 布局 ， 如 图 3-42 所 示 。 

有 了 栅 格 规范 ， 就 可 以 避免 产品 人 员 不 按 布 局 和 间距 标准 绘制 线 框 原型 ， 造 成 内 容 堆 埃 ， 使 
得 视觉 设计 师 需要 重新 规划 考虑 布局 。 


3.1.5 ”绘制 底部 标签 导航 













用 相同 的 方法 复制 形状 和 文字 ， 设 置 相 
数 并 调整 位 置 。 


绘制 














第 3 章 使 用 Sketch 绘制 线 框图 





FE 


在 画布 中 单 击 创建 二 个 标签 导航 条 ，， 
Tab Bar 一 4 ltems” 命 令 。 合适 
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在 设计 板 是 快捷 、 方 便 的 常用 方法 ， 创 建 组 件 后 ， 
Sketch 为 组 件 自动 生成 检查 器 ， 用 户 可 以 直接 在 检查 器 中 重新 设置 组 件 模板 的 参数 ， 也 可 以 在 组 
件 模板 上 双击 进入 编辑 状态 ， 对 组 件 中 的 元 素 进行 再 编辑 。 
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线 框 原型 是 产品 设计 的 保 真 呈现 方式 ， 是 产品 设计 和 开发 中 重要 的 工具 ， 可 以 帮助 设计 师 平 
衡 保 真 度 和 速度 。 下 面 通过 绘制 一 个 天 气 APP 线 框图 来 展示 其 绘制 过 程 和 效果 ， 如 图 3-43 所 示 。 
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图 3-43 


绘制 天 气 APP 线 框图 


源 文 件 : 源 文件 \ 天 气 APP 线 框图 .sketch 





视频 : 视频 \ 应 用 案例 \ 第 3 章 \3.2.1.mp4、3.2.2.mp4、3.2.3.mp4 


案例 分 析 

天 气 APP 在 人 们 的 生活 中 成 为 常用 工具 ， 被 大 多 数 人 时 
刻 关注 。 现 在 人 们 对 天 气 预报 的 需要 已 经 不 再 满足 于 简单 的 温 
度 和 晴雨 数据 。 本 案例 为 绘制 天 气 APP 首页 ， 制 作 过 程 中 运用 
了 网 格 功能 ， 频 繁 运用 图 层 编组 、 重 命名 等 操作 ， 以 及 组 件 模板 
的 插入 和 编辑 ， 并 涉及 使 用 钢笔 工具 绘制 简单 的 矢量 线条 。 

通过 本 案例 的 学 习 ， 用 户 可 以 熟悉 文字 和 形状 的 编辑 及 
使 用 ， 初 步 了 解 钢笔 工具 的 使 用 方法 ， 进 一 步 了 解 组 件 模板 
的 编辑 方法 ， 熟 悉 图 层 的 编组 、 重 命名 ， 以 及 调整 图 层 及 图 
层 组 的 排列 顺序 等 技能 。 


3.2.1 绘制 线 框图 首页 
在 Sketch 中 形状 图 层 是 设计 中 最 常用 的 图 层 。 无 论 是 设计 一 个 图 标 还 是 按钮 等 元 素 ， 都 离 不 
并 手 入 形 居 这 一 步 5 本 案例 次 不 邓 如 何 插入 形状 和 组 件 ， 以 及 企 短 寺中 修改 大 并。 






结构 分 析 

本 案例 共 设计 制作 4 个 APP 页 
面 ， 以 首页 下 滑 页 为 例 ， 分 为 4 个 部 
分 ， 第 一 部 分 为 信息 条 ， 第 四 部 分 为 
底部 导航 条 ， 这 两 个 部 分 在 APP 界 
面 设计 中 通常 是 必 不 可 少 的 ， 第 二 部 
分 为 24 小 时 晴雨 表 和 出 行 建议 板块 
之 后 的 搜索 页 面 和 设置 页 面 是 按钮 连 
接 的 第 三 部 分 ， 全 面 展示 了 一 个 天 气 
APP 的 界面 设计 流程 。 


在 画布 中 拖 动 最 





行 “ 插 入 一 矩形” 命令， 
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| 方法 选择 白色 圆 角 和 矩形 中 的 所 有 文字 
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,上 日 其 修改 为 “首页 1”， 将 相关 图 








图 层面 板 上 双击 iPhone 8 模板 的 名 称 ， 
层 进行 

















| 为 文件 重合 
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号 山 汪 :本 六” 括 入 贺 角 矩形 


单 击 工具 栏 上 的 “插入 ”按钮 , 选择 “形状 一 





圆 角 和 矩形 ”选项 , 或 执行 “插入 一 形状 一 圆 角 和 矩形 ” 


命令 , 还 可 以 按 【U 】 键 ， 在 画布 中 拖 动 鼠标 即 可 绘制 圆 角 和 矩形， 如 图 3-44 所 示 。 在 绘制 过 程 中 ， 
按 住 【 Shift 】 键 即 可 绘制 宽 和 高 相等 的 正 圆 角 矩形， 如 图 3-45 所 示 。 











图 3-45 


第 3 章 使 用 Sketch 绘制 线 框图 





:上 上 : 计 > 为 贺 角 和 矩形 设置 不 同 的 圆 角 半 径 
3》 视频 : 视频 \ 操 作 指南 \ 为 圆 角 矩 形 设置 不 同 的 圆 角 半 径 .mp4 


在 英文 状态 下 按 [ U 】 键 ， 在 画布 中 拖 动 鼠标 绘制 圆 角 矩形 ， 修 改 填 充 颜 色 Hex 值 为 
4A90E2， 如 图 3-46 所 示 。 
双击 该 圆 角 和 矩形 , 默认 状态 下 选择 左上 方 的 圆 角 , 修改 圆 角 的 半径 值 为 0, 如 图 3-47 所 示 。 
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图 3-46 图 3-47 
选择 右上 角 和 左下 角 ， 修 改 圆 角 半 径 为 30， 如 图 3-48 所 示 。 单 击 圆 角 矩形 右 下 角 的 圆 点 ， 
拖 动 滑 杆 上 的 按钮 到 最 大 值 ， 如 图 3-49 所 示 。 
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描 边 闲 十 
器 | ne :| 1 
图 3-48 图 3-49 
知识 链接 图 层面 板 页 面 1 ~ Et— 页 面 
图 层面 板 位 于 工作 区 的 左 侧 ， 如 图 3-50 所 示 。 图 层面 板 由 “os 
Pages (页面 )、Artboard ( 画板 ) 、 图 层 和 图 层 组 4 个 部 分 组 成 。 a 图 居 
图 层面 板 构成 了 Sketch 中 所 有 元 素 的 层级 关系 ， 任 何 元 素 都 可 i 
以 是 一 个 图 层 ， 一 个 以 上 的 元 素 可 以 组 成 一 个 图 层 组 ， 而 一 个 画 三 二 
板 内 的 元 素 包括 图 层 、 图 层 组 及 切片 。 一 个 页 面 可 以 创建 无 数 个 。 /四 am 。 《一 图 层 组 
画板 ， 而 一 个 文档 又 可 以 创建 无 数 个 页 面 。 i 
Aa 20 
本 ”图 层 类 型 图 3-50 
图 册 国 局 位 轩 加 后 和 于 于 | 
Sketch 中 的 常见 图 层 有 形状 图 层 、 文 字 图 层 、 位 图 图 层 和 ”一 霹 gas 上 
切片 图 层 4 种 ， 如 图 3-51 所 示 。 其 中 切片 图 层 本 身 没有 内 容 ， 加 ae | 
它 的 内 容 取 决 于 其 所 覆盖 的 图 层 ， 并 且 切 片 图 层 没有 图 层 顺序 的 四 Bmap < 一 一 位 图 图 导 
概念 ， 理 论 上 它 一 直 在 顶层 。 Aa 灰色 加 形 专 一 一 一 文字 图 层 
位 图 图 层 是 从 外 部 导入 的 位 图 图 像 ， 文 本 图 层 即 在 Sketch 和 弘 五 有 
中 输入 的 文字 ， 使 用 矢量 工具 绘制 的 图 形 和 形状 即 为 形状 图 层 。 立 sa < 一 形状 图 层 
除 切 片 图 层 外 ， 在 图 层面 板 中 选择 某 个 图 层 , 按 [Enter ] 键 可 一" a 
直接 进入 图 层 的 编辑 模式 。 了 二 可 
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二 山 二 ”隐藏 和 锁定 图 层 





首页 1 




















用 户 可 以 对 图 层 或 图 层 组 进行 隐藏 或 锁定 操作 ， 隐 藏 的 图 一 一 站 
层 在 页 面 上 无 法 看 到 ， 锁 定 的 图 层 在 页 面 上 无 法 被 选中 。 右 人 oe 
出 现 眼睛 图 标 目 该 选项 呈 灰 色 状态 表示 该 图 层 被 隐藏 ， 右 侧 出 NI 
现 锁 的 图 标 则 表示 该 图 层 被 锁定 ， 如 图 3-52 所 示 。 pe 

要 隐 茂 图 层 ， 用 户 将 光标 移动 到 图 层 列表 中 需要 隐藏 的 图 











层 处 ， 右 侧 会 出 现 眼睛 的 图 标 ， 单 击 该 图 标 即 可 隐藏 该 图 层 ， 2 

再 次 单 击 眼 睛 图 标 即 可 取消 隐藏 ， 用 户 也 可 以 使 用 快捷 键 【 Shift+Command+H ] 执行 该 操作 。 
选择 图 层 后 ， 使 用 快捷 键 【 Shift+Command+L 】 可 以 锁定 该 图 层 。 若 要 取消 锁定 ， 在 被 锁 

定 的 图 标 上 单 击 锁 图 标 即 可 。 





上 其 > 调整 图 层 排列 顺序 
3 视频 : 视频 \ 操作 指南 \ 调整 图 层 排列 顺序 .mp4 


打开 Sketch 文件“ 天 气 APP 首页 线 框图 ”, 可 以 看 到 图 层面 板 中 有 3 个 图 层 组 , 如 图 3-53 
所 示 。 打 开 “ 底 部 导航 条 ”图 层 组 ， 单 击 并 移动 Rectangle 6 形状 图 层 ， 可 调整 图 层 顺 序 。 用 户 


可 以 看 到 ， 排 列 在 下 面 的 图 层 将 被 上 面 的 图 层 所 履 盖 ， 如 图 3-54 所 示 。 
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图 3-53 图 3-54 


确定 Rectangle 6 形状 图 层 处 于 被 选择 状态 ， 执 行 “ 排 列 一 后 移 一 层 ”命令 ， 可 以 看 到 该 
图 层 在 图 层面 板 中 被 移 到 下 一 层 ， 如 图 3-55 所 示 。 单 击 工具 栏 上 的 “将 所 选 图 层 在 图 层 列 表 中 
下 移 一 层 ”图 标 转 ， 可 以 看 到 该 图 层 被 移 到 “底部 导航 条 ”图 层 组 的 最 底层 。 使 用 相同 的 方法 可 
以 移动 图 层 组 ， 如 图 3-56 所 示 。 
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3.2.2 绘制 首页 下 滑 页 


本 案例 涉及 对 图 层 的 复制 、 移 动 和 修改 及 “组 件 " 的 插入 ， 在 设计 过 程 中 使 用 模板 和 复制 命令 ， 
是 高 效 快 捷 的 好 方法 ， 能 大 大 提高 工作 效率 。 
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| 入 填充 颜色 Hex 值 为 9B9B9B 的 矩形 ， 插入 白色 贺 角 矩形 和 文字 | 
| 卓 了 ”使 用 相同 的 方法 在 “首页 2" 画板 中 插入 和 “ 首 ;中 吕 “进行 编组 。 
| 同 的 信息 条 。 | 
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择 “ 首 页 1” 画 板 中 的 一 个 文字 图 层 , 右 击 
住 弹出 的 快捷 菜单 中 选择 “拷贝 ”选项 。 





在 “首页 2” 画板 中 右 击 ， 在 弹出 的 快捷 菜 
单 中 选择 “粘贴 到 这 里 ”选项 。 | 








"Sketch 全 9:41AM * 100% mm 


图 昌平 区 黄平 路 20C 














移动 互联 网 之 路 一 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 

















































































布 中 过 续 单 击 ， 最 后 一 次 单 击 后 | 
雹 如 出 绘制 状 态 ， 设 置 描 边 半 色 为 时 色调， 
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”在 合适 位 置 插入 二 线 、 文 字 、 贺 角 逢 形 等 元 
| ]] 素 , 在 惟 查 器 中 设置 填充 和 描 边 问 色 等 参数 ， 
| 图 层 顺 序 ， 为 相关 图 层 编组 。 





插入 填充 颜色 Hex 值 为 F3F3F3 的 矩形 
，] 口 ”后 入 文字 ， 在 检查 器 中 设置 文本 闫 色 和 文字 
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单 击 工具 栏 上 的 “插入 ”按钮 ， 在 弹出 的 菜 | ， ， | 在 画布 中 合适 的 位 置 插入 组 件 ， ,个 激 风 出丑 
《二 单 中 选择 “is 用 户 界面 设计 一 Cells 一 应 ，] 叶 入 的 组 件 名 称 为 “出 行 建议 ” | 
用 程序 一 Messages Cell” 选项 。 
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! 启 7 近 第 友 肽 过 惑 出 行 建议 

i 不 宜 室外 运动 i 1 
! 司 ,ee | | | 适宜 风衣 YEsterbay > 

| ea | Ps : ® ©@ 清 宕 的 凉意 需要 件 厚 实 的 外 状 来 抵御 深秋 下 
























的 萧瑟 哄 ! 


在 图 层面 板 列表 中 进行 两 次 对 组 件 的 复制 ， 
全 他 因 慰 9 修改 文字 大 小 | 单 击 返 | 日 | | 修改 组 件 内 容 信息 ， 将 相关 图 层 和 组 件 进行 
| 编组 并 重 命名 图 层 组 为 “出 行 建议 板块 ”。 



























划 开 不 于 7 















不 宜 室外 运动 


气 混 集 低 ， 外 出 | 























由 于 本 ;对 复制 、 剪 切 和 粘贴 图 层 
使 用 快捷 键 【Command+D 】 可 以 复制 图 层 到 图 层 列表 ， 使 用 快捷 键 【Command+C 】 可 
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移动 互联 网 之 路 一 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 








以 复制 图 层 到 剪贴 板 ， 使 用 快捷 键 【 Command+X ] 可 以 剪 切 图 层 ， 使 用 快捷 键 【 Command+V 1】 











可 以 粘贴 图 层 。 

选中 多 个 图 层 ， 按 快捷 键 【Command+G 】 可 以 对 图 层 进 
行 编组 。 选 中 图 层 组 ， 按 快捷 键 【 Shift+Command+G 】 可 以 
对 图 层 组 取消 编组 。 

除 此 以 外 ， 选 择 图 层 后 ， 在 图 层面 板 上 右 击 ， 在 弹出 的 快捷 
菜单 中 ， 可 选择 粘贴 、 剪 切 、 拷 贝 、 复 制 、 隐 藏 图 层 和 锁定 图 层 
等 选项 ， 如 图 3-57 所 示 。 


内 ”搜索 图 层 


一 个 完整 的 作品 通常 由 很 多 图 层 组 成 。 为 便于 对 图 层 进 行 操 
作 ，Sketch 提供 了 图 层 搜 索 功 能 ， 其 位 于 图 层面 板 的 底部 ， 右 
侧 有 3 个 图 标 ， 默 认为 蓝 色 显示 ， 如 图 3-58 所 示 。 当 光标 移 
动 到 此 时 稍 等 片刻 ， 会 出 现 “显示 / 隐藏 列表 中 的 图 层 ” 和 “ 显 
示 / 隐藏 列表 和 文档 中 的 切片 ”字样 。 

单 击 第 一 个 按钮 ， 该 按钮 图 标 呈 灰色 显示 ， 此 时 列表 中 将 取 
消 显示 除 切 片 外 的 其 他 图 层 , 只 显示 切片 图 层 , 如 图 3-59 所 示 。 
用 户 可 对 切片 图 层 进行 搜索 。 

单 击 第 二 个 按钮 ， 当 该 按钮 图 标 呈 灰色 时 ， 后 面 的 数字 图 层 
也 变 成 灰色 ， 此 时 图 层面 板 列表 中 只 显示 除 切 片 图 层 外 的 其 他 图 
层 ， 如 图 3-60 所 示 。 用 户 可 以 对 这 些 图 层 进行 搜索 ， 该 按钮 图 
标 旁 的 数字 表示 该 页 面 中 切片 的 数量 ， 如 图 3-61 所 示 。 
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3.2.3 绘制 搜索 页 和 设置 页 
组 件 在 Sketch 中 是 一 个 重要 的 功能 ， Ee rt ni 


关于 如 何 创建 和 编辑 组 件 ， 将 在 后 面 的 章节 中 重点 介绍 ， 


图 层面 板 上 的 显示 页 面 列表 图 标 ， 打开 
表 ， 单 击 “+” 按 钮 创建 新 页 面 。 
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处 只 介绍 如 何 插入 组 件 并 进行 运用 。 


| 将 | 千 page 1 和 | page 2 2 重 命名 为 “ “首页 ” 和 “ 搜 
在 “搜索 页 ”插入 iPhone 8 画板 ， 
入 一 个 iOS 用 户 界面 设计 的 搜索 术 
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击 “ 插 入 ” 按钮 在 弹出 的 菜单 中 选择 “iOS : 
户 界面 设计 一 Keyboards 一 Keyboard+ | 
uggestions” 选项 。 
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移动 互联 网 之 路 一 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精 













“设置 页 ” 执行 “文件 一 从 模板 新 建 一 Material Design” 


命令 ， 在 检 板 中 找到 需要 的 元 家 对 其 进行 





: | 建新 页 面 ， 修改 页 面 名 称 为 
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i 丐 直属 > 画 好 APP 线 框图 流程 图 的 要 点 


》1. 了 解 自己 的 目标 
一 个 线 框图 可 以 有 效 地 提高 用 户 的 工作 效率 ， 修 改 计划 内 容 远 比 在 工作 开始 后 再 更 正 要 更 容 

易 一 些 。 先 做 出 计划 ， 提 出 问题 、 意 见 ， 以 便 解 决 问题 。 

》 2. 重 功能 ， 轻 外 观 

计划 展示 的 效果 不 同 主要 体现 在 所 采用 工具 的 多 样 性 ， 从 根本 上 说 都 是 介绍 有 关 功 能 部 分 的 
应 用 。 

》3. 积累 自身 经 验 

并 不 一 定 要 求 用 户 具备 设计 和 开发 的 能 力 , 而 需要 的 是 在 移动 UI 应 用 或 者 其 他 APP 上 的 经 验 。 
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》 4 . 确定 负责 人 

确保 有 人 对 整个 计划 负责 ， 他 们 负责 跟 进 和 管理 反馈 、 变 化 等 。 

》5. 涉及 每 个 人 

也 许 不 是 第 一 次 会 议 能 够 解决 的 问题 ， 但 是 必须 在 纸 上 锁定 一 个 简单 的 方案 并 且 是 涉及 关键 
利益 者 的 想法 。 

》 6. 预先 留 出 时 间 和 交付 期 限 

预先 留 出 时 间 和 交付 期 限 对 保持 项 目 运行 是 非常 重要 的 。 最 初 线 框图 可 以 是 一 天 或 是 几 天 ， 
具体 取决 于 应 用 程序 的 大 小 ， 但 都 需要 设 定 一 个 时 期 并 且 坚 持 下 去 ， 保 持 项 目 进程 。 

》7. 保持 清洁 

如 果 一 个 特别 的 APP 要 求 两 个 文本 框 和 一 个 按钮 ， 那 么 只 要 有 这 些 即 可 。 

》 8. 避免 设计 的 线 框图 太 多 

线 框图 只 要 阐述 如 何 达到 所 需 功 能 ， 不 包括 任何 介绍 和 设计 的 内 容 。 尽 量 避免 任何 有 关 设 计 
的 内 容 ， 这 样 很 容易 分 散 客户 的 注意 力 。 

》 9. 记 住 用 户 界面 不 是 用 户 体验 

线 框图 是 关于 功能 元 素 而 不 是 方案 展示 或 者 互动 的 方法 。 为 了 更 直观 地 展示 应 用 , 侧重 于 线 框图 。 

》10. 蔡 用 户 着 想 

重点 是 功能 ， 但 是 同样 要 考虑 用 户 的 体验 。 


》11. 避免 懒惰 


线 框图 效果 很 简单 ， 在 确保 线 框图 包含 计划 的 所 有 内 容 后 ， 在 项 目的 末尾 应 为 用 户 提供 一 个 
详细 的 说 明 ， 以 帮助 用 户 理解 功能 。 


“站 绘制 线 框 原型 时 ， 对 图 层 的 命名 和 编组 没有 严格 要 求 ， 但 是 建议 用 户 从 一 
Bs 开始 就 养 成 命名 和 编组 的 好 习惯 ,这样 在 后 续 对 文档 进行 修改 时 会 方便 很 
多 ， 在 进行 交互 细节 图 时 也 会 提升 工作 效率 。 





3 25 寺 > 线 框 原型 的 优势 


线 框图 的 制作 是 快速 而 廉价 的 ， 特 别 是 当 用 户 使 用 如 Sketch、Balsamiq 或 Axure 等 软件 来 
制作 时 。 当 然 ， 线 框图 也 应 当 在 设计 之 初 就 使 用 这 些 工 具 来 制作 。 比 起 创建 一 个 完整 、 细 致 、 高 
保 真 的 线 框图 ， 收 集 反 馈 信息 更 加 重要 。 

一 般 而 言 ， 用 户 更 注重 软件 的 功能 、 信 息 架构 、 用 户 体验 、 用 户 交互 流程 图 、 可 用 性 ， 而 不 是 
考虑 这 些 因素 的 美学 特征 。 同时 , 在 这 种 情况 下 , 根据 需求 进行 修改 也 无 须 涉及 代码 调整 和 图 形 编辑 。 





本 章 以 绘制 线 框 原 图 贯穿 始终 ， 包 括 Sketch 文件 的 新 建 和 保存 、 插 入 文本 、 设 置 文本 参数 、 
插入 形状 、 在 检查 器 中 调整 形状 及 图 层 的 基本 应 用 ， 通 过 2 个 综合 案例 、8 个 应 用 案例 和 5 个 操 
作 指 南 , 讲解 了 开始 页 面 设计 的 基本 操作 知识 。 通过 本 章 的 学 习 , 用 户 不 仅 可 以 了 解 线 框图 的 知识 ， 
还 可 以 对 Sketch 有 进一步 的 了 解 ， 并 掌握 文字 、 形 状 、 模 板 等 常用 工具 的 使 用 方法 。 
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设计 图 标 WY 绘制 一 组 APP 应 用 图 标 


图 标 在 数字 化 的 今天 极为 常见 ， 既 有 文字 传达 信息 直接 、 清 晰 的 优 
点 ， 也 有 图 像 吸引 注意 力 的 优势 ， 所 以 才 有 这 样 的 评价 一 一 一 套 UI 界 
面 的 主要 卖点 就 是 图 标 。 

本 章 运 用 时 下 最 流行 的 扁平 化 设计 理念 和 极 简 主义 风格 ， 通 过 2 个 
实战 案例 进行 15 个 图 标的 绘制 , 通过 4 个 操作 指南 具体 讲解 工具 的 运用 ， 


4.1 








iOS 是 由 苹果 开发 的 手持 设备 操作 系统 ， 主 要 应 用 于 iPod touch、iPod nano、iPad 及 Apple 
TV 等 产品 。iOS 的 用 户 界面 允许 用 户 使 用 多 点 融 控 直 接 进 行 操作 ， 控 制 方面 包括 滑动 、 轻 触 开关 及 
按键 。iOS 的 应 用 非常 多 ， 而 且 每 个 应 用 都 有 属于 自己 的 图 标 ， 如 图 4-1 所 示 。 





























图 4-1 
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案例 分 析 

本 案例 为 绘制 一 组 简洁 的 iOS 功能 图 
标 ， 功 能 图 标 为 系统 自 带 图 标 ， 无 须 下 载 和 
安装 ， 如 果 要 更 换 功 能 图 标的 样式 ， 可 以 通 
过 更 改 系统 页 面 的 主题 来 实现 。 

本 案例 运用 iOS 图 标 模板 ， 介 绍 了 画板 
的 复制 和 频繁 使 用 编组 功能 ， 进 一 步 介 绍 了 
如 何在 检查 器 中 修改 形状 图 层 的 属性 和 参数 ， 
演示 了 图 标的 绘制 过 程 .通过 本 案例 的 学 习 ， 
用 户 可 以 基本 了 解 图 标的 绘制 过 程 和 方法 。 


i 下 守信 5 著 P> iOS 和 iOS 图 标的 特点 
iOS 在 全 球 智 角 
手 也 可 以 很 快 学 会 


统 中 最 多 的 。iOS 系统 有 特定 的 低层 级 的 软件 和 


个 人 信息 及 企业 数据 的 安全 性 。 


设计 分 析 

本 案例 使 用 极 简 
主义 风格 ， 遵 从 扁平 
化 设计 原则 ， 使 用 简 
单 的 线条 、 形 状 等 元 
素 ， 不 但 风格 简洁 
易 识别 ， 还 做 到 辨识 
度 强 、 高 度 统一 。 


手机 系统 中 所 占 的 市 场 份额 超过 30%， 其 界面 十 分 优雅 简洁 ， 即 使 第 一 
使 用 。 世 界 级 的 庞大 APP 集合 


色彩 分 析 

经 典 的 色彩 搭配 永 
远 不 会 被 遗弃 ， 本 案例 使 
用 黑色 与 白色 作为 主 色 ， 
使 其 更 具 直 观 性 ， 既 简 
洁 又 引 人 注 目 ， 且 感 观 
舒适 。 


次 上 


，iOS 系统 所 拥有 的 应 用 程序 是 所 有 移动 操作 系 





固件 功能 ， 可 以 防止 恶意 软件 和 病毒 ， 用 于 保护 


iOS 图 标 具 有 良好 的 整体 性 ， 而 这 种 特性 可 以 减少 用 户 体验 上 带 来 的 冲突 。 在 设计 和 制作 





iOS 图 标 时 




















上 E325 和 P> 图 标 设计 的 必要 性 
图 标 设计 反映 了 人 们 对 事物 的 普遍 理解 ， 也 同时 展示 了 社会 、 
已 经 是 一 个 高 度 视觉 化 的 社会 ， 图 形 语 














人 文 等 多 种 内 容 。 


美观 的 特点 。 





, 需要 注意 体现 其 中 的 一 些 特 点 , 以 便 使 整体 UI 界面 的 协调 性 和 视觉 感 更 佳 。 如 图 4-2 
所 示 为 最 新 款 的 iPhone 8 界面 的 iOS 图 标 ， 充 分 体现 了 简洁 、 


当今 的 社会 
言 在 很 大 程度 上 蔡 代 了 传统 的 语言 ， 使 人 们 可 以 快速 地 进 
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行 视觉 交流 。 

要 想 设计 出 优秀 的 图 标 作品 ， 就 要 首先 了 解 图 标 设计 的 应 用 价值 。 图 标 设计 是 视觉 设计 的 重 
要 组 成 部 分 ， 其 基本 功能 在 于 提示 信息 与 强调 产品 的 重要 特征 ， 以 醒目 的 信息 传达 让 用 户 知道 操 
作 的 必要 性 。 如 图 4-3 所 示 为 iOS 功能 图 标 。 
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UI 图 标的 分 类 

Ul 中 的 图 标 设计 ， 从 应 用 上 分 为 应 用 程序 图 标 、 功 能 图 标 和 APP 应 用 图 标 。 打 开 手机 界面 ， 
可 以 看 到 有 一 些 图 标 是 系统 自 带 的 图 标 ， 如 图 4-4 所 示 。 最 下 面 一 排 及 邮件 、 日 历 、 照 片 、 相 机 、 
设置 等 图 标 为 功能 图 标 。 

对 于 功能 图 标 ， 最 初 的 样式 由 系统 开发 商 设计 ， 为 首次 打开 界面 的 默认 显示 ， 在 更 换 界面 主 
题 设计 时 可 以 发 生 改变 ,如 图 4-5 所 示 。 除 了 系统 自 带 以 外 的 图 标 都 是 应 用 图 标 , 如 图 4-6 所 示 。 
应 用 程序 图 标 和 功能 图 标的 规格 和 尺寸 在 不 同 的 系统 下 有 其 固定 规格 及 规范 尺寸 








图 rr 图 4-5 ! 图 4-6 
APP 应 用 图 标 为 进入 APP 页 面 后 所 看 到 的 图 标 ， 通 常会 按 服务 项 目 、 商 品种 类 及 APP 自 
的 功能 进行 分 类 和 排版 ， 其 设计 规格 和 尺寸 也 不 是 固定 的 ， 如 图 4-7 所 示 。 
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4.1.1 绘制 指南 针 图 标 


在 细致 化 处 理 图 标 时 ， 参 考 线 将 变 得 非常 有 用 ， 路 径 和 点 的 位 置 、 图 形 的 对 称 及 优美 的 弧 线 
都 离 不 开 参 考 线 的 帮助 ， 因 此 ，Sketch 提供 的 模板 中 也 已 经 将 参考 线 置 入 其 中 并 以 图 层 的 方式 存 





在 ， 在 图 标的 绘制 中 用 户 可 以 好 好 运用 ， 进 而 让 工作 变 得 更 加 轻松 和 高 











i 执行 “ 文件 一 从 模板 新 建 一 iOS 应 用 医 
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| 命令， 











选择 一 个 图 标 图 层 组 并 右 击 ， 在 弹出 













执行 “文件 一 新 建 ” 





















命令 , 新建 一 个 Sketch | 























白文 档 。 在 画布 或 图 层面 板 上 右 击 ， 在 弹 } 
菜单 中 ; 六 这 里 ” ; 



















































D3 
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层 组 粘贴 到 新 建 的 Sketch 文档 中 ， 



























层 ， 锁定 Grid 医 
并 将 其 
























































填充 闫 色 从 故 为 黑色 。 






































执行 “插入 一 形状 一 直线 ”命令 ， 绘 制 一 条 单 上 的 “合并 形状 ”按钮 ， 将 两 个 

直线 ， 设 置 颜色 和 描 边 粗 细 ， 复 制 该 图 层 合并 成 一 个 。 复 制 该 合并 形状 ， 在 检查 
| 右 击 , 选择 “变换 一 顺 时 针 90” 选 项 ”命令 。 器 中 设置 其 旋转 角度 为 5， 继续 复制 图 层 ， 
| 设置 旋转 角度 为 10、15、20， 依 此 类 推 。 
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层 隐 藏 ,选择 其 他 直线 绘制 任意 颜色 的 圆 形 该 贺 形 ， 将 复制 ; 
的 圆 形 以 同一 中 心 点 等 比例 缩放 ， 为 便于 观 | 
察 , 修改 其 颜色 为 白色 ， 在 工具 栏 中 单 击 “ 通 | 
过 排除 重 睹 将 两 合并 成 一 个 ”按钮 。 






























































































































































环形 状 复制 ， 方法， 将 另 一 个 圆 环形 状 的 填充 
之 前 隐藏 的 描 六 颜色 修改 为 黑色 ， 将 其 和 描 边 为 1 的 直线 合 
击 ， 在 弹出 的 时 选择， 创建 蒙 版 ， 设 置 混合 模式 

为 人 为 了 观看 效果 可 隐 

































































































































































取消 对 Grid 
i 度 为 30% 的 












































作画 全 号 O02 de 
































在 工具 ， 3 9 红色， # 旋 
i 中 选择 “形状 i i ， 并 移动 到 左上 角 合 适 的 位 置 。 隐 藏 |; 
层 组 ， 查 看 效果 。 
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图 层 是 Sketch 中 最 基本 的 构成 单位 。 一 个 对 象 即 为 一 个 图 层 ， 本 书 中 所 说 的 
象 ”其 实 是 相同 的 意思 ， 其 概念 是 可 以 相互 替换 的 。 
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知识 链接 在 画布 中 移动 和 选择 图 层 
用 户 可 以 选中 任意 图 层 ， 并 拖 动 鼠标 对 其 进行 移动 。 按 住 【 Shift 】 键 来 拖 动 ， 则 会 让 图 层 
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I 








格 按照 垂直 或 者 水 平方 向 移动 。 移 动 图 层 时 ， 按 住 [ Alt 】 刍 拖 动 图 层 ， 可 以 复制 一 个 图 层 ， 被 移 
动 的 是 被 复制 的 图 层 ， 原 图 层 的 位 置 不 会 发 生变 化 。 

















技 巧 
es 在 复制 并 移动 图 层 后 ， 使 用 快捷 键 【Command+D 】 可 以 重复 上 一 步 的 移 


动 轨迹 复制 新 图 层 。 














按 住 [ Shift ] 键 单 击 多 个 图 层 , 可 以 将 被 单 击 的 图 层 同 时 选择 。 在 多 个 图 层 被 同时 选择 的 情况 下 ， 
按 住 【 Shift 】 键 单 击 一 个 已 经 选择 的 图 层 ， 则 会 取消 对 该 图 层 的 选择 。 

当 图 层 被 编组 后 ， 在 画布 中 单 击 ， 默 认 选 择 的 是 图 层 组 。 如 果 要 选择 某 个 图 层 ， 需 要 在 该 图 
层 组 上 双击 ， 更 快捷 的 方法 是 按 [ Command 】 键 ， 直 接 选 择 图 层 组 中 的 图 层 。 


























局 山 导 下 ;省 了 选择 并 移动 重 双 图 层 


新 建 Sketch 文档 ， 单 击 工具 栏 上 的 “插入 ”按钮 ， 在 菜单 中 选择 “形状 一 星 形 ” 选 
项 ， 在 画布 中 插入 星 形 ， 如 图 4-8 所 示 。 使 用 快捷 键 【 Command+C 】 拷贝 图 层 ， 使 用 快捷 键 























【 Command+V 】 粘 贴图 层 ， 原 位 复制 一 个 星 形 图 层 ， 为 便于 对 重 蕊 图 层 进行 区 分 ， 将 置 于 顶层 
的 图 层 修改 任意 的 填充 颜色 ， 如 图 4-9 所 示 。 
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图 4-8 图 4-9 
在 工作 区 空白 处 单 击 ， 此 时 没有 图 层 被 选择 ， 如 图 4-10 所 示 。 在 星 形 上 单 击 ， 则 默认 于 
上 层 的 图 层 被 选择 ， 此 时 拖 动 鼠标 ， 可 移动 该 图 层 ， 如 图 4-11 所 示 。 
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图 4-10 图 4-11 


使 用 快捷 键 【Command+Z 】 恢复 操作 。 按 住 【 Alt 】 键 的 同时 单 击 星 形 ， 可 以 发 现 被 选 
择 的 是 两 个 重 革 图 层 中 被 置 于 下 一 层 的 图 层 ， 如 图 4-12 所 示 。 此 时 按 快捷 键 【 Alt+Command ] 
单 击 并 拖 动 鼠标 ， 可 以 发 现 被 移动 的 是 置 于 下 一 层 的 图 层 ， 如 图 4-13 所 示 。 
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[器 [ET 未 条 名 2 一 
二 局 画 导 @ ~ Ed 士 局 回 厘 @ ua 区 司 畏 好 [3 
Er a = e 交 
图 4-12 图 4-13 

















当 画 布 中 的 对 象 被 选择 时 ， 该 对 象 自 带 定 界 框 ， 定 界 框 上 有 8 个 控制 点 ， 拖 动 任意 一 个 控制 
点 都 可 以 调整 该 对 象 的 大 小 ， 在 调整 对 象 大 小 的 同时 ， 按 住 【 Shift ] 键 可 以 保持 对 象 的 宽 高 比例 。 
如 果 要 进行 精确 的 调整 ， 则 需要 通过 检查 器 来 完成 本 案例 部 分 元 素 的 制作 ， 用 户 可 以 重复 使 用 此 


技能 。 







































































村 网 组 了 J 担 : 子 
: [] i 选择 另 一 个 图 层 组 ， 隐 藏 矩 形 图 层 ， 显 示 圆 ; i 、 字 重 为 9 Lght 的 从 1 ~ 12 
| 角 矩 形 图 层 并 修改 填充 颜色 ， 以 中 心 点 绘制 } 的 数字 ， 并 调整 它们 的 位 置 。 | 
色 正 


















































祭 的 图 层 组 重 命名 为 “闹钟 ”。 
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十 入 贺 角 矩形 ， 设 置 合适 的 大 小 ， 设 置 条 黑色 的 直线 ， 设 置 直线 的 描 边 粗细 
矩形 上 面 的 两 个 圆 角 半径 为 8， 下 面 的 | | 
到 角 半 径 为 0 



























































取消 检查 器 中 对 填充 颜色 的 勾 选 ， 
边 选项 ， 然 后 再 绘制 两 个 黑色 正 加 
1 ， 设 置 白色 正 圆 的 不 透明 : 






















































































知识 链接 在 检查 器 中 精确 设置 对 象 大 小 

通过 检查 器 ， 可 以 对 图 层 iy 在 “位 置 ” 和 “大 小 ”文本 框 中 输入 数值 可 
以 改变 对 象 在 画布 中 的 位 置 ， Ra 0 图 4-14 所 示 。 
单 击 检查 器 中 “大 小 ”选项 “ 宽 ” 和 “高 ” Se 当 其 变 为 锁定 状态 时 ， 


可 锁定 宽 高 比例 ,此 时 在 “ 宽 ” 和 “高 ” ee 图 层 的 宽 和 高 将 按 比 例 同 时 变化 ， 
如 图 4-15 所 示 。 
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局 山 导 二; 对 在 检查 器 中 变换 对 象 


》 1. 旋转 图 层 
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使 用 Sketch 设计 图 标 


通过 在 检查 器 “变换 ”选项 的 “旋转 ”文本 框 中 输入 数值 ， 可 以 精确 改变 图 层 的 旋转 角度 ， 
将 光标 放 在 文本 框 上 ,会 出 现 向 上 和 向 下 的 小 三 角 按 钮 : ， 通 过 单 击 这 两 个 按钮 可 对 角度 进行 微调 ， 
每 单 击 一 次 旋转 角度 变换 1” ， 如 图 4-16 所 示 。 
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》 2. 翻转 图 层 


图 4-16 


单 击 检查 器 中 “翻转 ”选项 的 “水 平 翻转 ”或 “垂直 翻转 ”按钮 ， 可 水 平 翻转 或 垂直 翻转 被 
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图 4-17 


选中 图 层 ， 当 按钮 从 灰色 变 成 蓝 色 时 ， 表 示 该 对 象 正 处 于 翻转 状态 ， 如 图 4-17 所 示 。 
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4.1.3 绘制 计算 器 和 拍摄 图 标 
> 别 被 罗列 在 “形状 ”菜单 中 ， 两 者 之 间 随 时 可 以 
个 圆 角 和 矩形， 然 


在 Sketch 中 ， 窍 形 和 圆 角 矩形 为 便于 使 用 分 

相互 转换 。 用 户 可 以 插入 一 个 矩形， 通过 调整 将 其 变 为 圆 角 和 矩形 ， 也 可 以 插入 

百 再 调整 成 和 矩形。 如果 贺 角 半径 的 数值 足够 大 , 可 以 变 成 椭圆 形 , 甚至 通过 调整 单个 角 的 圆 角 半径 ， 

将 其 修改 为 优美 的 不 规则 形状 ， 用 户 可 以 灵活 运用 。 
选择 另 一 个 被 复制 的 
线 ， 复制 该 直线 并 右 击 ， 
选项 。 
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入 “插入 ”按钮 ， 选 择 “ 
Ph 单 击 输 入 文字 。 








































































































修改 组 的 名 称 为 “计算 器 ”，i 
i 个 被 复制 的 组 ， 锁定 Grid 图 层 藏 置 圆 角 半径 为 20。 
取消 隐藏 Applcon : 


























i Background 图 层 ， 






























































栏 上 的 “变换 





























按 [Enter 】 键 进入 编 


i 辑 状 态 ， 设 置 左上 角 和 
i 10， 右 上 角 和 右 下 角 的 区 











重 入 白 f 和 和 矩 形 ， 
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绘制 圆 角 和 矩形 ， 设 置 圆 角 矩 形 的 
， 修 改 左上 角 和 左下 角 的 




















有 快捷 键 [Command+G 】 将 相关 










































































iOS 系统 中 图 标的 尺寸 


iOS 系统 中 包含 两 种 图 标 ， 一 种 是 用 户 在 系统 界面 中 可 以 看 到 的 各 种 功能 图 标 ; 另 一 种 是 用 
作 展 示 应 用 程序 的 展示 型 图 标 。 


功能 图 标 代表 某 一 功能 或 者 某 一 链接 的 跳 转 。 在 iOS 系统 中 , 功能 型 的 图 标尺 寸 如 表 4-1 所 示 。 

































































表 4-1 
工具 栏 和 导航 栏 中 的 图 标 66x66 44x44 22x22 
人 ( 2 x96) ( ee x 32) ( 本 x32) 
展示 图 标 通常 是 应 用 程序 的 标识 图 标 。 在 iOS 系统 中 ， 展 示 型 图 标的 尺寸 如 表 4-2 所 示 。 
表 4-2 
全 | iphone7Pus | iPhone 1015/4 |Sketch 中 (SHR 
桌面 应 用 图 标 180x 180 120x 120 60x60 
App Store 图 标 1024 x 1024 1024 x 1024 1024 x 1024 
Spotlight 搜索 图 标 120x 120 80x80 40x40 
设置 中 的 图 标 87x87 58x58 29x29 


下 2 寺 > 不 同系 统 图 标的 更 换 方 法 


用 户 可 以 对 系统 中 的 单个 图 标 进行 修改 , 也 可 以 通过 修改 系统 的 主题 , 一 次 性 更 换 所 有 的 图 标 。 
针对 不 同 的 操作 系统 更 换 图 标的 方法 也 不 同 。 


》1. Windows 系统 图 标的 更 换 
在 Windows 系统 中 ， 如 果 要 更 换 某 一 个 “快捷 方式 ”或 者 “文件 夹 ”的 图 标 ， 首 先 在 “ 快 


津 方式 ”或 “文件 夹 ”图 标 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “属性 ”选项 ， 如 图 4-18 所 示 。 
在 弹出 的 “Internet Explorer 属性 ”对 话 框 中 单 击 “ 更 改 图 标 ” 按 钮 ， 如 图 4-19 所 示 。 然 后 
选择 想 更 换 的 图 标 ， 单 击 “ 确 定 ”按钮 即 可 ， 如 图 4-20 所 示 。 

如 果 要 更 换 Windows 系统 图 标 ， 需 要 借助 第 三 方 软件 。 例 如 ，IconPackager。 单 击 “ 添 加 


辐 标 包 ” 按 钮 ， 如 图 4-21 所 示 。 打 开 IconPackager 软件 ， 选 择 可 以 安装 的 图 标 文件 ， 将 
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打开 ， 图 标 将 显示 在 列表 中 ， 如 图 4-22 所 示 。 单 击 “ 应 用 更 改 ” 按 钮 后 ， 系 统 图 标 将 被 替换 。 
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Windows 默认 图 标 








应 用 图 标 包 
































图 4-21 


》2. Android 系统 图 标的 更 换 

Android 系统 中 有 很 多 应 用 程序 图 标 ， 这 些 图 标 并 不 被 所 有 人 喜欢 。 或 者 是 某 些 程序 不 具备 
高 分 辩 率 的 程序 图 标 ， 造 成 程序 在 高 分 辩 率 的 屏幕 下 图 标 显示 效果 较 差 。 可 以 通过 更 换 图 标 获 得 
更 好 的 效果 。 

更 换 Android 系统 图 标 需 要 在 计算 机 上 进行 ， 同 时 系统 中 需要 安装 解压 软件 WinRAR、 
DoAPK 和 Java 环境 。 

首先 找到 需要 更 换 图 标的 文件 包 ， 扩 展 名 为 APK 的 文件 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “ 重 
命名 ”选项 ， 将 其 修改 为 RAR 文件 ， 并 使 用 解压 软件 WinRAR 打开 ， 如 图 4-23 所 示 。 找 到 res 
文件 夹 , 这 个 文件 夹 中 存放 安装 程序 的 资源 文件 , 包括 各 种 图 片 素材 和 声音 素材 等 , 如 图 4-24 所 示 。 
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找到 图 标 文 件 “app_icon.png” 所 在 的 位 置 ， 找 到 需要 替换 的 图 标 ， 将 其 拖 到 WinRAR 界 
面 中 直接 覆盖 原 图 标 ， 如 图 4-25 所 示 。 需 要 注意 蔡 换 的 图 标的 格式 、 尺 寸 、 名 称 和 分 辨 率 都 要 
和 原来 的 图 标 保持 一 致 。 

重新 把 软件 的 扩展 名 修改 为 APK, 打开 DoAPK 软件 ， 单 击 “ 单 独 制作 ROM 及 APK 签名 ” 
按钮 ， 如 图 4-26 所 示 。 在 弹出 的 窗口 中 单 击 “ 选 择 APK 或 者 ROM 文件 ”按钮 ， 选 择 刚 修改 的 
APK 文件 ， 单 击 “ 制 作 签 名 ”按钮 ， 如 图 4-27 所 示 ， 即 可 完成 图 标的 修改 。 
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》3. iOS 系统 图 标的 更 换 
苹果 操作 系统 的 更 换 方 法 比较 简单 , 可 以 通过 第 三 方 软件 直接 实现 应 用 程序 图 标的 更 换 。 例 如 ， 


iBeauty For iPhone。 

首先 通过 互联 网 下 载 iBeauty 软件 并 安装 。 然 后 将 苹果 设备 与 计算 机 连接 ， 双击 启动 
IBeauty， 弹 出 “选择 设备 型 号 ”对 话 框 ， 如 图 4-28 所 示 。 根 据 个 人 的 情况 选择 不 同 的 苹果 设备 
后 ， 单 击 “ 确 定 ” 按 钮 启动 软件 ， 如 图 4-29 所 示 。 


无 法 自动 识别 您 的 设备 型 号 ,请 手动 选择 : 


| 广 豆 








图 4-28 入 图 4-29 
在 左 侧 列表 中 选择 “更 改 程序 图 标 ” 选 项 ， 在 窗口 右 侧 选择 “用 户 程 序 ” 选 项 卡 ， 在 下 方 将 
显示 设备 中 所 安装 的 所 有 程序 ,如 图 4-30 所 示 。 找到 要 蔡 换 图 标的 程序 ， 单 击 “ 更 换 图 标 ” 按 钮 ， 
如 图 4-31 所 示 。 
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按钮 后 , 即 可 完成 程序 





图 标的 更 换 , 如 图 4-32 所 示 。 



































重启 设备 后 就 看 到 更 换 了 图 标的 效果 。 





4.1.4 绘制 日 记事 图 标 





日 记事 图 标 无 论 是 在 系统 图 标 和 APP 应 用 图 














标 中 都 很 常见 。 本 案 








例 通过 简单 地 插入 文字 和 直 








线 来 绘制 一 个 日 记事 图 标 ， 同 时 也 应 用 布尔 运算 。 











用 户 可 以 体会 布尔 运 
的 方便 。 





| 01 | 隐藏 Backgrou 


算 在 绘制 图 标的 过 程 中 带 来 






的 组 ， 锁 定 Grid 图 层 组 ， 
nd 图 层 ， 显 示 APP Icon | 


















































修改 为 














i Shape Copy 图 层 并 将 其 复制 ， 将 填充 颜 : 



































选择 要 更 换 的 按钮 ， 单 击 “ 确 定 ”按钮 。 此 时 软件 会 弹出 窗口 提示 备份 原 图 标 。 单 击 “ 确 定 ” 





















图 











层 ， 按 【 Enter 】 键 进入 编辑 状 


态 ， 按 [ Delete 】 键 删除 多 个 锚 点 ， 得 到 一 个 | 
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下 过 5 对 > 图 标 集 的 制作 流程 
在 实际 的 设计 工作 中 ， 图 标 都 是 成 套 出 现 的 。 无 论 是 制作 单个 图 标 还 是 整个 图 标 集 ， 首 先 需 











要 明确 图 标 最 终 的 输出 要 求 。 也 就 是 要 知道 设计 出 来 的 图 标 未 来 将 会 应 用 到 什么 程序 中 。 了 解 最 
终 的 输出 目的 后 ， 有 利于 设计 者 选择 正确 的 尺寸 、 色 彩 模式 和 输出 格式 。 

个 完整 的 图 标 集 是 通过 一 个 团队 制作 完成 的 。 为 了 统一 团队 中 每 一 个 人 的 制作 规范 ， 避 免 
出 现 制作 效果 不 一 致 的 现象 ， 在 开始 制作 前 通过 文本 的 形式 创建 一 个 制作 规范 文档 。 在 该 文档 中 
以 列表 的 形式 将 制作 图 标的 设计 内 容 、 规 格 尺寸 、 图 标 风格 、 输 出 格式 、 制 作 流程 和 时 间 进 度 等 
信息 罗列 出 来 ， 并 由 全 体 成 员 签字 确认 。 





















































是 保证 设计 工作 快速 有 效 完 成 的 前 提 。 即 使 整个 项 目 是 由 一 个 人 独立 完成 的 ， 也 


国 创建 一 个 制作 规范 文档 ， 将 有 利于 在 设计 制作 过 程 中 保持 正确 的 方向 和 焦点 ， 这 
a 要 在 正式 开始 设计 前 制作 一 个 规范 文档 。 


3》 1. 创建 制作 清 

完成 规范 文档 的 创建 后 ， 即 可 进入 实质 性 的 制作 过 程 。 在 开始 制作 前 ， 将 所 有 要 制作 的 图 标 
分 类 ， 按 照 图 标的 不 同 种 类 、 不 同 制作 方法 、 不 同 输出 要 求 ， 将 其 以 表格 的 形式 罗列 出 来 。 完 成 
一 个 图 标 后 ， 即 可 对 照 该 表 检查 ， 可 以 很 好 地 跟踪 整个 项 目的 制作 进度 ， 记 录制 作 过 程 中 的 技术 
细节 。 


》 2. 设计 草图 

可 以 使 用 铅笔 在 纸 上 绘 制 草 
图 ， 也 可 以 使 用 数字 绘图 板 在 计 
算 机 上 绘制 。 绘 制 完成 后 将 草图 
绘制 或 者 打印 到 纸 上 ， 然 后 拿 给 
身边 的 朋友 或 同事 看 ， 根 据 他 们 
的 反应 做 适当 的 修改 。 绘 制 时 要 
将 图 标的 富 意 准确 地 传达 ， 并 
以 统一 的 风格 将 整个 图 标 集中 
的 所 有 图 标 草图 绘制 出 来 ， 如 
图 4-33 所 示 。 初 次 绘制 的 草 
图 需要 根据 设计 要 求 多 次 修改 调 


， 直 到 图 标 集 寓意 准确 。 
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草图 对 于 图 标 设计 来 说 尤其 重要 。 在 设计 的 最 初 阶段 ， 设 计 者 是 通过 一 个 简单 的 
EE 线 稿 来 获得 灵感 。 尤 其 是 要 设计 一 些 复制 风格 的 作品 ， 更 需要 使 用 草图 将 图 标的 
概念 隐喻 以 一 种 相对 清晰 简单 的 方式 呈现 出 来 。 
3》 3. 数字 呈现 
草图 绘制 完成 后 ， 即 可 使 用 计算 机 软件 将 其 数字 呈现 。 常 用 的 软件 有 Adobe Photoshop、 
Adobe lllustrator 和 Corel CorelDraw。 图 标的 操作 系统 对 图 标的 要 求 也 不 相同 。 所 以 在 开始 制 
作 前 可 以 先 下 载 一 个 模板 ， 仔 细 研 究 后 ， 创 建 统一 的 尺寸 和 独 有 的 色 板 ， 为 制作 图 标 做 好 准备 。 
在 制作 过 程 中 ， 要 合理 地 利用 计算 机 软件 的 各 种 功能 ， 例 如 ， 合 理 利用 符号 和 图 案 填 充 ， 存 
储 通用 的 图 层 样 式 等 。 这 样 做 既 能 提高 工作 效率 ， 又 可 以 保证 图 标 集 中 所 有 对 象 具 有 相同 的 效果 ， 
如 图 4-34 所 示 。 





3》 4. 确定 最 终 效果 

绘制 完成 所 有 图 标 后 ， 要 针对 一 些 共同 的 元 素 进行 检查 。 例 如 ， 图 标尺 寸 是 否 正确 ， 图 标 是 
否 对 齐 ， 颜 色 是 否 匹 配 等 。 一 旦 所 有 的 图 标 都 完成 了 评审 ， 即 可 为 整个 图 标 组 创建 一 个 图 标 ， 开 
始 图 标的 最 终 测试 。 

应 用 程序 的 开发 成 员 可 以 临时 使 用 一 个 简陋 的 图 标 测 试 程序 。 也 就 是 说 ， 图 标 对 于 整个 应 用 
程序 的 开发 来 说 并 不 是 很 着 急 。 但 是 尽快 地 将 图 标 应 用 到 应 用 程序 的 测试 环节 中 ， 有 利于 发 现 图 
标的 不 足 ， 能 够 有 更 充足 的 时 间 进 行 改进 。 

》 5. 命名 并 导出 

完成 图 标 设计 后 ， 要 将 它们 保存 。 一 个 明确 又 容易 理解 的 文件 名 不 仅 可 以 帮助 用 户 快速 识别 
图 标 ， 还 可 以 帮助 用 户 快速 排列 图 标 ， 方 便 检查 浏览 。 而 且 不 同 的 操作 平台 对 于 图 标的 命名 都 有 
不 同 的 命名 习惯 和 文件 夹 结 构 。 这 些 内 容 都 应 该 在 最 初 的 规范 文档 中 有 所 体现 ， 避 免 由 于 混乱 的 
名 字 造 成 不 必要 的 麻烦 。 


本 案例 为 绘制 一 组 旅游 APP 程序 图 标 。 程 序 图 标 是 一 个 APP 程序 的 标示 ， 代 表 一 个 APP 
程序 在 系统 中 的 存在 ， 需 要 生动 体现 该 APP 的 功能 和 作用 ， 如 图 4-35 所 示 。 
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源 文件 : 源 文件 
视频 : 视频 \ 应 


案例 分 析 

本 案例 运用 iOS 图 标 模板 ， 涉 及 简 
单 的 布尔 运算 ， 展 示 了 如 何 使 用 布尔 运 
算 裁剪 、 拆 分 、 合 并 多 个 规则 图 形 创建 
和 编辑 不 规则 图 形 。 通 过 本 案例 的 学 习 ， 
用 户 可 以 进一步 提高 图 标 绘制 能 力 ， 掌 
握 不 规则 形状 的 编辑 方法 。 


设计 分 析 

本 案例 继续 使 用 极 简 
主义 风格 ， 遵 从 扁平 化 设计 
原则 ， 使 用 最 简单 的 图 形 结 
构 ， 达 到 了 主题 清晰 、 表 现 
生动 的 设计 理念 ， 既 给 人 以 
愉快 的 感觉 又 不 失 时 尚 。 


4.2.1 绘制 旅行 箱 图 标 













色彩 分 析 

以 天 蓝 色 和 秘 黄 色 
为 主 色 ， 给 人 以 一 种 明 
快 、 愉 悦 和 朝气 蓬勃 的 感 
觉 ， 冷 暖色 调 的 搭配 与 衔 
接 营造 了 温暖 与 静 诬 并 
存 的 舒适 感 ， 引 人 向 往 。 





再 逼真 的 图 标 也 是 由 图 形 和 颜色 构成 的 ， 两 者 在 Ul 设计 中 无 处 不 在 ， 做 好 形状 和 颜色 的 处 理 ， 
是 图 标 设计 极为 重要 的 部 分 。 本 案例 中 不 仅 使 用 插入 形状 ， 还 对 形状 的 点 和 线 进 行 细致 、 精 确 的 
调整 ， 无 论 是 投影 还 是 物体 本 身 ， 实 质 上 都 是 在 对 形状 的 点 、 线 和 颜色 进行 调整 
























































了 阐 应 用 图 标 i 
| 命令， 选择 一 个 图 标 模板 并 右 击 ， 在 弹出 的 ; [] 口 出 的 快捷 菜单 中 选择 “粘贴 到 
| 快捷 菜单 中 选择 “拷贝 ”选项 。 | 
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锁定 Grid 图 层 组 ， 隐 藏 Background 图 层 ， 复制 贺 角 和 矩形， 修改 填充 颜色 Hex 值 为 
: i 显示 App Icon Shape 图 层 ， 从 中 心 点 绘制 ; i 09ABE5。 绘 制 任意 颜色 的 和 矩形， 将 其 旋转 : 
: 0 | 填充 颜色 Hex 值 为 F4E6C6 的 正 圆 和 填充 叫 | i -45。， 将 两 个 形状 同时 选中 ， 单 击 工具 栏 | 
i 颜色 Hex 值 为 6DD1F5 的 圆 角 和 矩形 。 i 中 的 “通过 区 域 相交 将 两 个 图 层 合并 成 一 个 ” } 

| 按钮 并 对 该 图 层 进行 复制 ， 单 击 检查 器 中 的 | 
“水 平 翻转 ”按钮 ， 调 整 复制 图 层 的 位 置 。 













































































插入 填充 颜色 Hex 值 为 8B572A 的 矩形 ， 绘 
制 白色 正 圆 并 多 次 复制 ， 调 整 它们 的 位 置 。 












































| 对 相关 图 层 进行 复制 并 移动 到 合适 的 位 置 ，| | 绘制 任意 颜色 矩形 ， 同 时 选择 矩形 和 刚 被 裁 
中 





继续 插入 任意 颜色 的 圆 角 和 矩 形 ， 同 时 选择 两 ; 
个 形状 ， 通过 减 去 项 层 进行 裁剪。 








; 将 两 个 图 层 合并 成 一 个 ”按钮 。 


















i i #8 
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通过 两 次 布尔 运算 ， 得 到 下 面 的 形状 ， 将 其 
放 到 合适 的 位 置 。 























Hr WT ER EY 5 Ez | 
创建 组 件 





























| ,复制 Oval 图 层 ， 将 刚 变换 角度 的 形状 与 | 
| Oval 图 层 同时 选中 ， 进 行 区 域 相交 的 裁剪， ， 








正本 和 可 和 到 二 














.上 将 Combined Shape 图 层 的 不 透明 度 设 制 “行李 寄存 ”画板 
| 上 为 50%， 调 整 图 层 上 顺序， 修改 当前 模板 画 ;| 吓 余 图 层 删除 。 隐 藏 Grid 
板 名 称 为“ 行李 寄存 ”。 外 图 层 。 
































所” 编辑 形状 
选择 一 个 形状 图 层 ， 按 [ Enter ] 键 或 双击 该 图 层 ， 可 切换 到 编辑 状态 。 在 编辑 状态 中 ， 用 
99 @@ 
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户 可 以 通过 移动 形状 图 层 的 点 和 线 对 形状 图 层 进行 修改 和 编辑 ， 如 图 4-36 所 示 。 








未 命名 一 己 写 汉 一 








本 
全 三 
[1 在 
二 和 一 
A 
EE 
- | 




















图 4-36 
一 个 封闭 形状 的 路 径 ， 由 锚 点 和 线段 组 成 ， 锚 点 与 锚 点 之 间 由 线段 连接 ， 单 击 并 拖 动 某 个 点 
可 以 移动 该 点 的 位 置 ; 双击 某 个 锚 点 ， 可 以 通过 控制 杆 调整 点 与 点 之 间 的 线段 来 对 形状 进行 编辑 ， 
如 图 4-37 所 示 。 
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4.2.2 ”绘制 轮船 图 标 


本 案例 通过 多 次 复制 图 层 组 为 多 个 图 标 创建 相同 的 轮廓 ， 一 组 图 标的 设计 需要 有 一 致 性 ， 这 
种 一 致 性 有 时 可 以 通过 多 次 复制 一 个 对 象 和 图 层 组 来 轻松 完成 。 


| 复 钊 的 模板 画板 中 的 多 余 图 民 员 除 后 ， 对 | 绘制 任意 颜色 的 贺 角 和 矩形， 设置 圆 角 半径 为 
| 。 | 其 多 次 进行 复制 。 ; 15， 修 改 左上 角 和 右上 角 的 半径 为 0， 通过 | 
01: [I ee 5 调整 ， 继 续 绘 
ms | ee 
:i 
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制 多 个 正方 形 ， 通 过 减 去 顶层 
剪 ， 插 入 两 个 贺 角 矩形 。 










续 插 入 不 同 大 小 的 白色 正 圆 ， 调 整 它们 的 
| 位置， 显示 Combined Shape 图 层 ， 修 改 
画板 名 称 。 | 
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EE 二 全 央 P> 设置 缩放 显示 
3》 视频 : 视频 \ 操作 指南 \ 设置 缩放 显示 .mp4 


打开 “简单 图 标 设计 .sketch” ,执行 “显示 一 放大 ” 
命令 ， 可 以 看 到 画布 被 放大 的 效果 。 需 要 时 执行 “显示 
一 缩小 ”命令 。 

[DER 执行 “显示 一 画布 ”命令 ,打开 “画布 ” 子 菜单 ， 
其 中 包含 “缩放 时 显示 像素 ”和 “缩放 时 显示 像素 网 格 ” 
选项 ， 如 图 4-38 所 示 。 

[GE 选择 “缩放 时 显示 像素 ”选项 ， 放 大 画布 时 ， 可 
以 看 到 图 层 像素 的 样子 。 取 消 选择 “缩放 时 显示 像素 ” 

选项 ， 图 层 的 边缘 显示 为 顺 滑 的 曲线 。 这 两 种 状态 分 别 
为 位 图 显示 和 矢量 图 显示 的 预览 模式 ， 如 图 4-39 所 示 。 














显示 颜色 
显示 字体 
返回 到 实例 


隐藏 工具 栏 
自 定义 工具 栏 … 


全 屏 







和 显示 标尺 
缩放 时 显示 像素 
缩放 时 显示 像素 网 格 


V 显示 智能 参考 线 
V 显示 选择 手柄 

习 %T | v 显示 图 层 高 亮 

V 显示 画板 阴影 


显示 网 格 
显示 布局 
网 格 设置 … 
布局 设置 … 
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图 4-38 
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图 4-39 
IE 选择 “缩放 时 显示 像素 网 格 ” 选 项 ， 放 大 画布 时 ， 可 以 看 到 网 格 显示 。 取 消 选择 “缩放 时 
显示 像素 网 格 ”选项 ， 在 放大 时 则 去 除 网 格 的 显示 ， 如 图 4-40 所 示 。 


CD 二 ED EE 
中; 加 时 (J -Q: 丰 面 (3)9 周秀 让 Eg 八 咎 击 帆 . 回 骨 -Q+ 国画 全 印 A 闽 和 上 好 走 














图 4-40 


[GE 需要 注意 的 是 ， 当 图 层 以 100% 的 尺寸 ( 图 片 的 实际 尺寸 ) 来 查看 时 ， 这 两 个 模式 看 起 来 
没有 任何 区 别 ， 只 有 当 放 大 时 才 会 显示 。 





在 实际 进行 图 标 设计 时 ， 特 别 是 功能 性 图 标 设计 时 ， 常 常会 借助 外 部 的 资源 。 合 
理 地 使 用 资源 ， 可 以 更 好 地 完成 设计 工作 。 通 常情 况 下 是 通过 在 互联 网 上 搜索 专 
业 的 图 标 网 站 或 资源 网 站 ， 获 得 图 标 文件 及 其 源 文件 。 





Et 去 [3 关 从 ”使 用 缩放 工具 
3 视频 : 视频 \ 操作 指南 \ 使 用 缩放 工具 .mp4 


打开 “简单 图 标 设 计 .sketch”， 执 行 “显示 一 放大 ”命令 ， 可 以 看 到 画布 被 放大 的 效果 ， 
如 图 4-41 所 示 。 执 行 “ 显 示 一 缩小 ”命令 ， 可 以 看 到 画布 被 缩小 的 效果 。 单 击 工具 栏 上 的 放大 
镜 图 标 “+” 和 “-” 按 钮 ， 可 达到 同样 的 效果 ， 如 图 4-42 所 示 。 

加 王 单 击 “ 放 大 ”按钮 ， 当 光标 变 成 放大 镜 标志 时 ,在 画布 中 单 击 并 拖 动 鼠标 ， 可 选择 缩放 范围 ， 
选择 时 范围 区 域 以 蚁 行 线 显示 ， 如 图 4-43 所 示 。 
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图 4-43 


在 放大 的 同时 按 住 【 Alt ] 键 ， 并 按 住 空格 键 不 放 ， 可 移动 画布 ， 但 是 在 移动 后 ， 


国 单 击 工具 栏 上 的 缩放 按钮 ， 在 画布 中 单 击 默认 放大 画布 。 如 果 要 缩小 画布 ， 需 要 
画布 会 继续 放大 , 用 户 需要 再 次 单 击 缩放 按钮 关闭 缩放 状态 , 才 可 以 正常 移动 画布 。 





4.2.3 绘制 帐篷 和 太阳 伞 图 标 


将 已 经 绘制 好 的 形状 进行 旋转 或 翻转 复制 ， 或 运用 多 次 复制 、 组 合 及 布尔 运算 ， 可 以 绘制 出 
很 多 漂亮 的 形状 。 本 案例 通过 一 些 类 似 的 方法 绘制 形象 的 帐篷 和 太阳 伞 图 标 ， 使 用 户 能 够 体会 一 
些 技巧 的 妙用 










































| 继续 选择 另 一 个 复制 的 画板 绘制 图 标 ， 绘 制 | 。。 | 使 用 矢量 工具 绘制 Hex 值 为 B57842 的 形 
01 br lr a oli [次 复制 该 形状 并 对 其 进行 水 平 副 转 ， 移 动 
将 其 复制 并 进行 水 平 翻转 , 绘制 黄色 三 i 

































































103@ 


移动 互联 网 之 路 一 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 


轨 





显示 App Icon Shape 图 
称 为 “帐篷 ”。 


插入 正 圆 和 矩形， 通过 布尔 运算 的 裁剪 得 到 
半圆 形状 。 














Fit ss 

















过 移动 锚 点 和 控制 杆 进行 调整 。 再 次 复制 
i 半圆 形状 ， 插 入 正 圆 并 对 其 进行 多 次 复制 ， 
将 它 们 同时 选中 。 


i F90422 的 红色 ， 调 整 图 
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虽 | 





: 显示 Combined Shape 形状 合并 图 | 
i 【 Enter ] 键 进入 编辑 状态 ， 调 整 锚 ; be | 


























二 六 信和 图 标的 源 文件 格式 


一 般 情况 下 , 从 互联 网 上 获取 的 源 文件 有 4 种 格式 , 分 别 是 Sketch、Al、EPS 和 PSD, 如 图 4-44 


所 示 。 


Ou 


使 用 Sketch 设计 图 标 





3》 1. Sketch 格式 


、 


Sketch 生成 的 源 文件 的 扩展 名 为 .sketch。 随 着 Sketch A、 











软件 的 日 益 普及 ， 网 上 很 多 资源 都 采用 该 格式 。 下 载 到 Sketch 
文件 后 ,双击 即 可 在 Sketch 中 打开 , 然后 继续 对 其 进行 各 种 操作 。 


》2. Al 格 式 SKETCH 


Al 格式 是 Adobe lllustrator 生成 的 文件 格式 ， 也 是 最 为 常 
见 的 一 种 矢量 格式 源 文件 。 这 种 格式 不 能 被 Sketch 直接 入。 国 汪 到 
如 果 直 接 将 Al 文件 拖 入 Sketch 中 ，Sketch 会 将 此 文件 的 内 二 
图 4-44 























容 合 成 为 一 个 位 图 ， 用 户 将 无 法 对 该 元 素 进 行 再 次 编辑 。 
如 果 要 使 用 Al 格式 素材 ， 将 其 在 lllustrator 中 打开 ， 然 后 
选择 导出 为 SVG 格式 ， 再 次 导入 Sketch 中 即 可 。 


》3. EPS 格式 

Sketch 可 以 直接 打开 大 多 数 的 EPS 文件 。 对 于 一 小 部 分 无 法 打开 的 文件 ， 用 户 可 以 使 用 
lustrator 打开 ， 然 后 另存 为 SVG 格式 ， 再 将 SVG 格式 在 Sketch 中 打开 即 可 。 

》4. PSD 格式 


PSD 是 Adobe Photoshop 生成 的 文件 格式 。 这 种 格式 也 不 能 直接 导入 Sketch 中 使 用 。 可 
以 先 在 Photoshop 中 打开 , 然后 选择 导出 为 EPS 格式。 再 将 导出 的 EPS 文件 拖 入 Sketch 中 打开 。 
如 果 无 法 正确 识别 ， 可 将 EPS 文件 在 lllustrator 中 打开 ， 另 存 为 SVG 格式 。 














够 符合 系统 的 规范 要 求 。 同 时 利用 丰富 的 互联 网 资源 , 找到 自己 想 要 的 图 标 文件 ， 


国 掌握 使 用 Sketch 绘制 图 标的 方法 和 技巧 是 非常 必要 的 。 绘 制 完成 的 图 标 也 要 能 
, 可 以 大 大 地 降低 制作 成 本 。 


绘制 酒杯 、 救 生 圈 、 天 气 、 冰 激 凌 图 标 





本 案例 通过 旋转 形状 和 布尔 运算 绘制 漂亮 的 酒杯 和 救生 圈 图 标 ， 用 复制 、 等 比例 缩放 、 变 换 

















的 功能 绘制 天 气 和 冰激凌 图 标 。 用 户 可 以 通过 本 案例 体会 Sketch 工具 既 简 单 便捷 又 强大 的 功能 ， 
还 可 以 体会 参考 线 在 绘制 过 程 中 的 重要 用 处 。 






















复制 Combined Shape Copy, 层 ， 插入 正 | 
， 调 整 图 层 顺序 ， 单 击 工具 栏 上 的 “ “通过 | 
图 层 合并 成 一 个 ”按钮 。 : 
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继续 插入 其 他 文字 ， 设 置 文字 的 各 项 参数 并 

















F97A31。 





| Rs rrr 二 了 Eee o. 


























| 进行 复制 。 按 住 【Shift ] 键 和 【 Alt] 
05 刍 以 中 心 点 等 比例 调整 复 制 国 的 大 小， 以 成 i 上]6 . 

















行 “ 插 入 一 形状 一 柄 加 形 ”命令 ， 绘 制 一 
调整 位 置 。 修 改 圆 形 的 填充 颜色 Hex 值 为 ; 加 ， 个 填充 颜色 Hex 值 为 F90422 的 正 | 














制 圆 环 ， 绘 制 三 




















两 个 图 层 合并 成 一 个 ”按钮 。 





环 同 


时 选中 ， 单 击 工具 栏 上 的 “通过 区 域 相交 将 








单 击 通过 布尔 运算 裁剪 后 的 Combined 
| Shape Copy 图 层 ， 设 置 填充 颜色 为 白色 ， 
; 复制 该 形状 ， 单 击 工具 栏 上 的 “旋转 ”按钮 ， 























圆 ， 取 消 勾 选 “ 填 充 ” 复 选 杠 ， 


:0 错 边 颜色 为 Hex 什 为 F90422， 描 边 的 位 置 







































































| | 显示 Combined Shape 图 层 ， 编 辑 和 移动 ””_ | 单 击 “ 插 入 ”按钮 ， 选 择 “ 星 形 ”选项 , 设 ， 
| 错 点 到 合适 的 位 置 。 ] 6 置 瑞 点 为 15， 半 径 为 60， 填 充 颜 色 Hex 值 | 
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通过 布尔 运算 编辑 形状 ， 其 中 两 种 蓝 色 的 划 村 相关 图 层 同 时 选中 ， 调整 它们 的 大 小 和 位 | 
Hex 值 分 别 为 09ABE5 和 6DD1F5。 置 。 




















卫 不 pe 国 乒 ， 


删除 错 点 编辑 该 图 层 ， 修改 画板 的 名 称 为 “天 : 























9 局 ， 候 
图 层 ， 进 入 编辑 状态 ， 通 过 调整 氏 点 的 位 和 局 叫 “ 色 形状 Hex 值 为 D0021B， 正 国 形 状 Hex 
| 和 国 角 半 径 的 值得 到 下 面 的 形状 。 值 为 F8E71C。 | 





























制 填充 颜色 为 无 ， 描 边 颜 色 为 D0021B 的 
i 弧 线 ， 取 消 隐藏 Combined Shape 图 层 ，| 
i 移动 该 图 层 的 锚 点 对 其 进行 编辑 ， 将 当前 画 ; 
名 称 重 命名 为 “冷饮 ” : 
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本寺 > 标 尺 和 参考 线 


3》 1. 显示 和 隐藏 标尺 


Sketch 中 的 标尺 工具 默认 是 隐藏 状态 ， 若 要 显示 标尺 ， 执行“ 显示 一 画布 一 显示 标尺 ”命令 ， 
如 图 4-45 所 示 , 或 使 用 快捷 键 [ Control+R ] 即 可 显示 标尺 , 如 图 4-46 所 示 。 同样 , 再 次 执行 “ 显 
示 一 画布 一 显示 标尺 ”命令 ， 或 使 用 快捷 键 【 Control+R ] 可 隐藏 标尺 。 




















0 加 6 二 
二 缩放 时 显示 像素 8 
显示 颜色 示 二 
显示 字体 hand 
返回 到 实例 人 8 
隐藏 工具 栏 。“ 习 种 T | Y 显示 图 层 高 亮 
自 定义 工具 栏 .。 V 显示 画板 阴影 8 
全 屏 和 ^3F | 显示 网 格 
显示 布局 . 
”网 格 设置 … 本 
| “布局 设置 … 
图 4-45 图 4-46 


》 2. 创建 、 移 动 和 删除 参考 线 


在 标尺 上 双击 ， 即 可 添加 参考 线 。 如 果 需 要 移动 参考 线 ， 必 须 在 标尺 中 选择 参考 线 进行 拖 动 ， 
如 图 4-47 所 示 。 若 要 删除 参考 线 ， 将 参考 线 移动 到 交叉 区 域 即 可 ， 如 图 4-48 所 示 。 

















2 
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| 





I 
| 





图 4-47 


》 3. 使 用 智能 参考 线 


图 4-48 


Sketch 有 非常 强大 的 智能 参考 线 ， 我 们 在 设计 时 选中 图 层 ， 然 后 按 【 Option 】 键 并 移动 鼠 
标 , 便 可 自动 测量 出 该 图 层 和 其 他 图 层 或 者 是 画板 的 边 距 , 对 于 确定 是 否 对 齐 非常 有 用 , 如 图 4-49 
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医 | 


所 示 。 将 光标 移动 到 哪个 图 层 便 测量 该 图 














层 和 光标 所 在 图 





层 的 边 距 。 





智能 参考 线 在 默认 情况 下 是 被 打开 的 ， 可 执行 “显示 一 画布 一 显示 智能 参考 线 ” 


打开 和 关闭 状态 。 
由 二; 填 和 ”使 用 网 格 

》1. 常规 网 格 

执行 “显示 一 画布 一 显示 网 格 ”命令 ， 可 以 打开 / 
关闭 网 格 ， 如 图 4-50 所 示 。 常 规 网 格 是 典型 的 方形 
布局 网 格 ， 它 附带 颜色 块 的 大 小 、 线 的 粗细 等 属性 ， 
如 图 4-51 所 示 。 















| v 显示 标尺 
缩放 时 显示 像素 
缩放 时 显示 像素 网 格 


国民 
^P 
^Xx 





命令 ， 切 换 






































































图 4-50 图 4-51 
执行 “显示 一 画布 一 网 格 设置 ”命令 ， 可 以 对 默认 网 格 的 大 小 和 颜色 进行 设置 ， 如 图 4-52 所 示 。 
》 2. 布局 网 格 sona 所 选 的 页 面 和 画板 。 
布局 网 格 允 许 用 户 定义 列 和 行 ， 这 种 布局 非常 人 
适合 做 网 页 设计 。 在 布局 网 格 中 ， 用 户 可 改变 页 面 加 引线 入 每。 10 | 阁 . 
的 总 宽度 ， 以 及 所 含 多 少 个 纵 列 。 同 时 也 可 修改 每 名 : [| | 
一 个 横 排 的 高 度 和 纵 列 的 宽度 ， 还 有 针对 间距 的 选 ee 
项 , 如 图 4-53 所 示 。 执行 “显示 一 画布 一 显示 布局 ” 设置 为 默认 取消 好 
命令 可 以 打开 / 关闭 布局 网 格 ， 如 图 4-54 所 示 。 
图 4-52 
a va A i 
显示 像素 ^P 
站 缩放 时 显示 像素 网 格 ”人 ^X 有 
Se ,| v 显示 智能 参考 线 日 
到 ”| v 显示 选择 手柄 
pe 和 
全 屏 ^%F | ”显示 网 格 18 
网 格 设置 让 
布局 设置 … 
图 4-53 图 4-54 
知识 链接 Sketch 中 的 贝 塞 尔 曲线 
贝 塞 尔 曲线 (Be zier Curve)， 又 称 为 贝 兹 曲线 或 贝 济 埃 曲线 ， 是 应 用 于 二 维 图 形 应 用 程序 的 


©11 
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数学 曲线 。 一 般 的 矢量 图 形 软 件 通过 它 来 精确 画 出 曲线 。 贝 塞 尔 曲线 由 线段 与 锚 点 组 成 ， 锚 点 是 
可 拖 动 的 支点 ， 线 段 像 可 伸缩 的 皮 筋 一 样 。Sketch 中 贝 塞 尔 曲线 的 构成 ， 如 图 4-55 所 示 。 


。< 一 控制 点 





未 选中 的 错 点 
图 4-55 


规则 的 图 形 可 以 通过 插入 形状 来 绘制 ， 进 入 编辑 状态 后 ， 通 过 控制 锚 点 的 位 置 和 调整 曲线 来 
改变 和 编辑 形状 ， 但 是 在 实际 应 用 中 ， 不 是 所 有 的 图 形 绘制 都 通过 插入 形状 进行 编辑 ， 使 用 矢量 
工具 可 以 直接 绘制 不 规则 的 图 形 及 路 径 。 

Sketch 中 的 矢量 工具 按钮 图 标 看 上 去 像 钢笔 一 样 ， 也 可 以 称 为 钢笔 工具 。 执行 “插入 一 矢量 ” 
命令 ， 即 可 在 画布 中 绘制 贝 塞 尔 曲线 和 不 规则 形状 。 





[于 入 ”使 用 钢笔 工具 绘制 路 径 
3》 视频 : 视频 \ 操作 指南 \ 使 用 钢笔 工具 绘制 路 径 .mp4 


[ER 单 击 工具 栏 上 的 “插入 ”按钮 ， 选 择 “ 矢 量 ”选项 ， 在 画布 中 单 击 ， 创 建 第 一 个 锚 点 ， 按 
住 【 Shift 】 键 在 空白 处 单 击 ， 绘 制 0” 直 线 ， 如 图 4-56 所 示 。 

继续 在 空白 处 单 击 并 拖 动 鼠标 绘制 曲线 ， 如 图 4-57 所 示 。 使 用 相同 的 方法 继续 绘制 并 封 
闭路 径 ， 如 图 4-58 所 示 。 


广博 


图 4-56 图 4-57 图 4-58 


IgEE3 按 [ Enter ] 键 进入 编辑 状态 , 在 线段 上 单 击 添加 锚 点 ,如 图 4-59 所 示 。 单 击 检查 器 中 的 “对 
称 ” 按 钮 ， 如 图 4-60 所 示 。 

















让 三 | 万字 本 
打开 路 径 ET ET 
i | 位 置 [ms CE 


/| 是 
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图 层 ， 按 【 Enter 】 键 或 











路 径 绘制 完成 后 ， 通 常 需要 对 其 进行 编辑 调整 。 选 择 想 要 编辑 的 形状 
在 形状 上 双击 ， 即 可 进入 编辑 模式 。 
CE 山 让 二; 对 了 锚 点 和 曲线 的 控制 


进入 编辑 状态 后 ， 在 锚 点 上 单 击 ， 即 可 选中 当前 锚 点 。 此 时 检查 器 中 显示 “直角 ” “对 称 ”“ 断 
开 连 接 ” 和 “不 对 称 ”4 种 锚 点 转换 方式 ， 如 图 4-61 所 示 。 灰 色 显 示 的 是 当前 锚 点 类 型 ， 此 时 可 
以 通过 单 击 右 侧 检查 器 中 的 按钮 来 转换 锚 点 类 型 ， 如 图 4-62 所 示 。 








位 于 rsaa | re | 
全 全 谈 
直角 直角 对 称 
- - 在 
断 开 连 接 断 开 连 接 不 对 称 


国 角 
图 4-62 








国 衣 
图 4-61 


了》1. 直角 和 对 称 模式 

单 击 检查 器 中 的 “直角 ”按钮 ， 圆 角 会 转换 成 直线 ， 锚 点 两 边 的 曲线 也 会 转换 成 直线 ， 直 角 
状态 下 是 没有 控制 点 和 控制 线 的 ， 只 能 通过 移动 锚 点 来 改变 形状 ， 如 图 4-63 所 示 。 

在 对 称 状态 下 ， 锚 点 两 侧 的 控制 轴 始 终 在 一 条 直线 上 ， 并 且 两 边 控制 杆 的 长 度 始终 一 致 ， 拖 
动 其 中 一 个 控制 点 拉 长 控制 杆 时 ， 另 一 个 控制 杆 也 会 发 生 改 变 。 当 锚 点 一 侧 的 曲线 发 生变 化 时 ， 


会 影响 另 一 侧 的 曲线 ， 如 图 4-64 所 示 。 








打开 路 径 完成 编辑 
位 置 17532 64.73 

a i 人 17532 | [6473 
全 在 一 

直 朋 对 称 全 在 

直角 对 称 
E= 在 后 mx 
Dnata TH 白 开 连 失 不 昌 称 

中 国 角 0 » 国 角 
图 4-63 图 4-64 


》 2. 断 开 连接 和 不 对 称 模式 
选择 一 个 锚 点 ， 单 击 检查 器 中 的 “ 断 开 连 接 ”按钮 。 此 时 操控 一 侧 的 控制 杆 和 控制 点 ， 当 曲 


线 发 生变 化 时 ， 不 会 影响 另 一 侧 的 曲线 和 控制 杆 ， 如 图 4-65 所 示 。 
单 击 检查 器 中 的 “不 对 称 ” 按 钮 ， 锚 点 的 两 个 控制 轴 始 终 在 一 条 直线 上 ， 但 是 两 个 控制 轴 的 


长 度 可 以 相互 独立 调整 ， 如 图 4-66 所 示 。 





Cr 





位 置 17532 | 16473 
攻 人 [zssz | [e473 
全 在 下 
六 i 全 访 
直角 对 称 
友 [4 坊 三 
断 开 连 接 不 对 称 断 开 连 接 不 对 称 
国 角 国外 
图 4-66 
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将 光标 移动 到 曲线 路 径 上 ， 单 击 即 可 添加 一 个 锚 点 。 如 果 要 删除 锚 点 ， 只 需 选 


避 氏 天 在 实际 的 绘制 过 程 中 ， 经 常 需要 为 曲线 添加 锚 点 ， 以 实现 更 复杂 的 图 形 效果 。 
Bs 中 想 要 删除 的 锚 点 ， 按 【 Delete ] 键 即 可 删除 。 
本 于 且 使 有 铅笔 工具 绘制 红心 形状 


?3 视频 : 视频 \ 操 作 指南 \ 使 用 钢笔 工具 绘制 红心 形状 .mp4 


执行 “显示 一 画布 一 显示 网 格 ”命令 ， 单 击 工具 栏 上 的 “插入 ”按钮 ， 选 择 “ 矢 量 ”选项 ， 在 
画布 中 连续 单 击 绘制 三 角形 , 如 图 4-67 所 示 。 在 线段 上 添加 锚 点 , 移动 锚 点 的 位 置 , 如 图 4-68 所 示 。 



























































图 4-67 图 4-68 
单 击 检查 器 中 的 “ 断 开 连 接 ” 按 钮 ， 拖 动 控制 点 调整 曲线 ， 如 图 4-69 所 示 。 使 用 相同 的 
方法 调整 另 一 边 的 曲线 ， 使 两 边 看 上 去 对 称 ， 如 图 4-70 所 示 。 
nme 本 EE 
人 小 、 位 年 10213 40 PE 一 一 一 
< pal > | * 7 ES 万 而 i We | 
Nt 记 A 7 
中 届 曙 押 取 ”在 去 
仿生 对 弄 ; 无 Ba a | sy 
图 4-69 图 4-70 


添加 锚 点 ， 单 击 检查 器 中 的 “ 断 开 连 接 ”按钮 ， 调 整 路 径 曲 线 。 如 图 4-71 所 示 为 继续 添 


加 锚 点 ， 单 击 检查 器 中 的 














“不 对 称 ” 按 钮 ， 调 整 路 径 曲 线 ， 如 图 4-72 所 示 。 














TU | how je | 

全 7 

4 直角 到 株 

Ss > 起 看 

DA 断 开 这 闪 不 对 和 

i 夯 角 
全 昌江 齐 : 无 盏 五 全 区 齐 : 无 -a9 
图 4-71 图 4-72 


使 用 相同 的 方法 添 








0 锚 点 、 编 辑 心 形 路 径 另 一 侧 的 路 径 曲 线 ， 使 其 看 上 去 对 称 ， 如 图 4-73 











所 示 。 在 绘制 过 程 中 利用 网 格 作为 参考 ， 绘 制 完 成 后 ， 取 消 义 选 “ 描 边 ” 复 选 框 ， 设 置 填充 颜色 ， 





如 图 4-74 所 示 。 
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打开 站 色 i 
HA 位 置 a 1932 
| | 全 六 

/ 
- 1 直角 对称 
和 A 起 | 
Ts | 断 开 连接 不 对 称 
| 因 角 0 
图 4-73 图 4-74 





4.2.5 绘制 飞机 图 标 


本 案例 通过 修改 、 复 制 、 旋 转 等 操作 调整 形状 绘制 一 个 形象 、 漂 亮 的 飞机 图 标 。 在 绘制 过 程 


中 使 用 用 la 法 ， 用 户 可 以 看 角 规 则 从 到 尝 








9 不 规则 形状 的 演变 过 程 。 

















和 矩形 修改 的 形状 ， 将 两 个 形状 同时 选 














插入 酉 贺 形 并 将 其 复制 与 合并 ， 复 制 刚 使 用 














工具 栏 上 的 “通过 区 域 相交 将 两 个 
































| 插入 三 角形 ， 通 过 移动 锚 点 和 修改 圆 角 半 径 ; 
值 修改 为 下 面 的 形状 。 两 个 蓝 色 的 Hex 值 ; 
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了 解 图 标的 属性 

很 多 图 标 看 似 相同 , 但 从 它们 的 基本 属性 上 分 析 却 有 很 大 的 不 同 。 图 标的 属性 包括 类 型 、 尺 寸 、 
颜色 的 数量 、 透 明 效果 、 阴 影 效果 、 图 标的 倾斜 、 风 格 等 。 
》 1. 类 型 
图 标 分 为 矢量 图 标 和 位 图 图 标 两 种 。 由 于 位 图 图 标的 效果 比较 丰富 ， 所 以 目前 大 部 分 的 图 形 
界面 中 都 采用 了 位 图 图 标 。 只 有 少数 的 系统 中 才 单纯 地 使 用 矢量 图 标 。 例 如 ，IRIX Interactive 
Desktop 系统 。 
于 现在 高 像素 密度 的 显示 器 和 一 些 低 像素 密度 的 显示 器 同时 存在 ， 在 图 标 设计 中 使 用 矢量 
图 标 就 会 更 灵活 ， 如 图 4-75 所 示 。 而 且 使 用 矢量 图 标 将 不 用 为 同一 个 图 标 创建 不 同 尺 寸 的 版 本 ， 
使 用 渐变 的 效果 ( 如 增加 倾斜 和 缩放 效果 ) 很 容易 ， 增 加 其 他 的 一 些 视觉 效果 ( 如 阴影 效果 ) 也 更 
容易 。 反 锯齿 和 其 他 的 一 些 技术 保证 了 使 用 矢量 图 标 实现 的 效果 与 使 用 位 图 实现 的 效果 差不多 。 






























































图 4-75 
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》2. 尺 十 

由 于 早期 的 系统 在 图 形 上 的 功能 比较 弱 ， 早 期 的 图 标 大 多 数 采 用 32 x 32px 的 尺寸 。 但 也 有 
一 些 例外 ， 如 NEXTSTEP 系统 就 采用 48 x 48px 的 尺寸 。 

近年 来 ， 图 标的 设计 者 慢 慢 地 摆脱 了 图 标 面积 为 1024px 的 限制 。Mac OS 采用 128 x 
128px 的 尺寸 Windows 采用 64 x 64px 的 尺寸 。 一 些 流行 的 操作 系统 也 采用 了 大 的 尺寸 。 为 
了 使 图 标 保持 兼容 性 和 通用 性 , 可 以 在 所 有 系统 中 正常 显示 , 在 设计 图 标 时 要 设计 一 个 较 小 的 尺寸， 
如 图 4-76 所 示 。 同 时 尺寸 为 16 x 16px 或 24 x 24px 的 图 标 也 在 操作 系统 中 被 使 用 。 
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图 4-76 


》 3. 颜色 数量 
图 标的 颜色 数量 一 直 在 稳定 发 展 ， 从 最 早 的 1 位 两 种 颜色 ( 通常 是 黑色 和 白色 )， 到 4 位 16 
种 颜色 ， 到 8 位 256 种 颜色 ， 如 图 4-77 所 示 。 随 着 图 标 制作 技术 的 发 展 ， 越 来 越 丰富 的 颜色 将 



























































应 用 到 图 标 设计 中 ， 甚 至 会 出 现 远 远 超过 人 类 眼睛 分 辨 的 百 万 种 颜色 的 图 标 。 
一 
人 
图 4-77 
了 》4. 透明 效果 


在 最 新 的 图 形 界 面 中 ， 透 明 效果 扮演 着 重要 的 角色 。 图 标 透 明 效 果 的 使 用 ， 很 好 地 表现 了 图 
标的 质感 ， 可 以 更 好 地 辅助 图 标的 功能 ， 如 图 4-78 所 示 。 
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图 4-78 
》 5. 阴影 效果 
使 用 伪 3D 视图 表现 图 标的 立体 效果 的 方法 越 来 越 普及 ， 在 图 标 中 也 逐渐 使 用 阴影 效果 ， 如 
©@1'' 
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4-79 所 示 。 








图 4-79 


》6. 图 标的 倾斜 
许多 不 同系 统 的 图 标 使 用 了 不 同 的 倾斜 ， 例 如 Copland、BeOS、Windows、Mac OS 等 。 
















































































在 其 中 一 些 图 标 中 应 用 得 很 好 。 图 标的 倾斜 通常 会 导致 图 标的 不 一 致 。 在 Windows 中 采用 两 种 
倾斜, 但 它们 没有 很 好 地 融合 在 一 起 , 如 图 4-80 所 示 。 在 Mac OS 中 , 图 标的 倾斜 应 用 得 比较 好 ， 
如 图 4-81 所 示 。 














图 4-80 图 4-81 


3》7. 风格 

早期 的 图 标 很 抽象 ， 可 能 只 是 为 了 表示 一 些 概念 。 后 来 ， 图 标 渐渐 支持 更 多 的 颜色 ， 在 “抽象 
和 具体 ”之 间 不 断 平衡 。 目 前 ， 大 多 数 的 图 标 都 应 用 现实 主义 的 手法 。Mac OS 中 的 图 标 内 容 比 之 
前 版 本 的 图 标 内 容 多 了 512 倍 ， 如 图 4-82 所 示 。 






































图 标的 绘制 是 UI 设计 中 最 为 重要 的 一 个 环节 , 一 个 好 的 图 标 , 需要 有 指 代 性 、 识 别 性 和 审美 性 。 
本 章 不 仅 详细 阐述 了 图 标的 绘制 过 程 ， 介 绍 了 使 用 缩放 工具 、 参 考 线 和 网 格 、 检 查 器 以 及 调整 锚 
点 和 曲线 的 方法 ， 还 讲述 了 UI 图 标的 分 类 、 图 标的 更 换 方法 、 绘 制 流程 和 图 标 属性 等 理念 与 实际 
相 结 合 的 知识 。 通 过 本 章 的 学 习 ， 用 户 在 Ul 图 标 设计 上 可 以 达到 一 个 新 的 高 度 。 
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本 章 知识 点 
绘制 一 组 播放 器 按钮 
绘制 质感 按钮 





播放 器 无 论 在 移动 端 还 是 在 PC 端 都 极为 常见 ， 网 络 中 音频 和 视频 的 播放 越 来 越 方便 ， 各 种 
播放 软件 层出不穷 ， 各 种 APP 皮肤 样式 更 是 丰富 多 彩 。 下 面 通 过 绘制 一 组 播放 器 按钮 ， 来 展开 
UI 设计 中 更 为 重要 的 一 个 环节 ， 如 图 5-1 所 示 。 
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绘制 一 组 播放 器 按钮 





实战 源 文件 , 源 文件 \ 播 放 器 按钮 .sketch 
视频 : 视频 \ 应 用 案例 \ 第 5 章 \5.1.1.mp4、5.1.2.mp4、5.1.3.mp4、5.1.4.mp4、 5.1.5.mp4、 5.1.6.mp4 
案例 分 析 设计 分 析 色彩 分 析 
本 案例 为 一 组 播放 器 按钮 设 本 案例 为 一 组 播 。 主 色 : 


计 ， 通 过 布尔 运算 、 渐 变 填 充 、 。 放 器 按钮 设计 ， 在 迪 ”IE 
阴影 、 内 阴影 和 模糊 等 工具 的 运 。” 求 扁平 化 和 简约 风格 。 辅 色 : 
用 ,详细 讲解 了 一 组 按钮 的 设计 流 ” ”的 同时 ， 做 到 表达 精 Ee JE 


程 和 规范 。 通 过 本 案例 ， 用 户 可 以 。 致 并 富有 时 代 气 息 。 ES 和 
学 习 具 有 一些 立体 效果 和 四 加 感 的 。 整体 设计 有 重点 ， 风 。 相间 的 银色 和 海蓝 色 为 辅 色 ， 皮 给 人 
a 使 用 Sketch 会 制 出 要 格 婉约 明快 。 一 种 辽阔 、 幽 远 的 感觉 ， 又 显得 光彩 
逼真 、 更 有 吸引 力 的 Ul 元素。 夺目 ， 引 人 注目 。 


通关 必 读 UI 设计 中 最 常见 的 按钮 如 何 设计 

设计 按钮 的 方法 有 很 多 ， 因 此 ， 在 设计 过 程 中 尽量 做 到 仔细 推 鼓 、 反 复 打磨 。 按 钮 设计 最 主 
要 的 一 个 特点 是 要 与 内 容 相符 ， 要 考虑 按钮 的 布局 与 页 面 整体 布局 是 否 匹 配 并 具有 一 致 性 。UI 设 
计 中 常见 按钮 的 设计 大 同 小 异 ， 下 面 介绍 按钮 设计 中 的 几 个 注意 事项 。 


》 1. 要 与 品牌 相符 

按钮 要 与 品牌 一 致 ， 颜 色 、 视 觉 风格 和 APP 上 的 应 用 图 标 及 品牌 Logo 的 风格 相 统一 。 其 中 ， 
形状 、 色 彩 、 材 质 、 图 案 、 字 体 等 元 素 都 能 影响 用 户 浏览 的 体验 。 如 果 一 款 界面 扁平 化 色彩 占 主导 ， 
就 尽量 不 要 使 用 拟 物 风格 的 按钮 ， 避 免 风格 混合 和 各 种 装饰 手段 。 

按钮 不 是 单独 存在 的 ， 能 够 与 界面 内 容 和 风格 协调 统一 是 按钮 设计 的 宗旨 ， 而 不 是 为 了 漂亮 
而 设计 ， 如 图 5-2 所 示 为 一 组 结构 简单 、 风 格 统一 又 不 失 美感 的 按钮 。 

》 2. 重要 的 按钮 做 出 强调 

按钮 是 界面 中 必 不 可 少 的 一 部 分 ， 却 不 适宜 太 过 抢眼 ， 但 又 不 能 太 不 明显 。 因 此 ， 其 中 重要 
的 按钮 需要 利用 色彩 、 大 小 、 留 白 、 字 体 来 提高 按钮 的 视觉 表现 力 ， 从 而 引导 用 户 交互 ， 做 出 强调 ， 
如 图 5-3 所 示 。 
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图 5-2 图 5-3 
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》 3. 考虑 与 其 他 元 素 的 对 照 










































































如 果 界 面 中 很 多 元 素 都 是 圆 角 的 ， 那 么 按钮 不 妨 做 成 直角 的 ， 这 样 对 照 感 就 会 很 强烈 ， 一 些 
次 要 的 UI 元 素 或 者 按钮 可 以 在 设计 中 减少 如 阴影 、 内 阴影 等 效果 的 运用 ， 以 突出 主要 按钮 。 如 






































图 5-4 所 示 为 圆 角 和 直角 的 相互 运用 且 强 调 主 次 的 一 组 按钮 设计 。 


》 4. 可 以 尝试 使 用 描 边 
如 果 按 钮 比 背 景 颜色 深 ， 可 以 尝试 使 用 深 色 描 边 ; 如 果 按 钮 比 背 景 颜色 浅 ， 没 有 描 边 会 显得 
有 些 杂 乱 ， 而 使 用 深 色 描 边 可 以 使 按钮 看 起 来 更 加 清晰 和 明确 ， 显 得 饱满 。 如 图 5-5 所 示 为 使 
深 色 和 浅 色 描 边 的 按钮 。 






















































































图 5-4 


》5. 本 
模糊 的 阴影 在 浅 色 背景 下 更 能 凸显 元 素 的 主体 效果 ， 深 色 背 景 下 阴影 的 运用 显得 尤为 重要 ， 
它 取决 于 你 的 处 理 是 否 得 当 ， et 慎 使 用 ， 如 图 5- 6 所 示 。 


























图 5-6 


》 6. 合理 运用 符号 全 :会 











在 很 多 时 候 ， 符 号 要 比 文字 的 描述 更 直观 ， 箭 头 朝 
右 的 符号 意味 着 开启 某 个 功能 ， 箭 头 朝 下 的 符号 意味 着 1 0 » 4 © }» 
展开 隐藏 的 内 容 。 如 图 5-7 所 示 为 使 用 符号 的 按钮 设计 。 
》7. 注意 设计 不 同 的 反馈 状态 按钮 
按钮 是 APP 中 一 项 功能 的 开启 ， 通 常 不 仅 有 一 个 状 - 
态 ， 默 认 状 态 、 悬 停 状 态 、 点 击 状态 、 忙 碌 状 态 和 失效 状态 都 有 一 个 操作 反馈 的 状态 效果 ， 这 一 
点 有 时 会 被 忽略 ， 而 如 果 不 能 按照 真实 的 生活 建立 认 知 模型 ， 用 户 在 使 用 过 程 中 可 能 会 感到 失落 。 


:1 = 人 [99> 设置 重生 的 填充 样式 


》 视频 : 视频 \ 操作 指南 \ 设置 重 双 的 填充 样式 .mp4 
hE 击 工具 栏 上 的 “插入 ”按钮 ， 依 次 选择 “形状 一 多 边 形 ” 选 项 ， 在 画布 中 单 击 并 拖 动 鼠 
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标 绘制 一 个 任意 颜色 的 多 边 形 ， 如 图 5-8 所 示 。 
D2 勾 选 “填充 ” 复 选 框 , 设置 填充 颜色 为 “噪点 填充 ”, 设置 “强度 ” 为 50%, 如 图 5-9 所 示 。 
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图 5-8 图 5-9 


[GEE 单 击 检查 器 中 填充 面板 右上 角 的 “+” 号 按钮 ， 添 加 新 的 填充 ， 在 “渐变 ”选项 卡 中 选择 第 
二 个 渐变 选项 ， 如 图 5-10 所 示 。 设 置 两 个 填充 效果 的 不 透明 度 为 50%， 如 图 5-11 所 示 。 
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图 5-10 图 5-11 
[RE 设置 渐变 填充 的 混合 模式 为 “颜色 加 深 ”， 效 果 如 图 5-12 所 示 。 


循环 按钮 是 播放 器 按钮 中 常见 的 ， 它 的 功能 
是 在 点 击 后 将 列表 中 的 项 目 按 顺 序 播放 后 进行 
再 循环 ， 使 播放 器 一 直 处 于 播放 的 状态 。 下 面 将 
通过 绘制 一 个 循环 按钮 的 案例 来 介绍 按钮 设计 
中 渐变 工具 的 使 用 。 


建 Sketch 空白 文档 ， 将 其 重 命名 为 “播放 ; 
按钮 ”, 为 该 文档 设置 标签 样式 和 存储 路 径 。 


击 工具 栏 上 的 “插入 ”按钮 , 按 住 [Shift ] 
绘制 宽 和 高 为 100 的 正 圆 ， 为 该 形状 设置 |. 
充 和 阴影 效果 ， 在 检查 器 中 设置 为 Hex 值 : 
EEEEEE 至 B2B2B2 的 渐变 填充 。 
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取消 勾 选 “阴影 ” 复 选 框 ， 重 新 设置 其 填充 | 
为 Hex(EEEEEE 一 D3D1D1 一 B5B0OB0O) i 
的 浙 变 填充 。 
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i 阴影 效果 。 在 检查 器 中 选择 浅 绿 到 深 绿 的 渐 
i 变 选项 ， 设 置 渐变 方式 为 “ 径 向 渐变 ”， 适 
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在 检查 器 中 设置 人 
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插入 正 圆 ， 取 消 色 选 “填充 ” 复 选 框 ， 设 置 
0 描 边 大 小 为 8, 执行 “图 层 -路 径 -打开 路 径 ” 
命令 。 
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如 i E6E3E3、FAFAFA 的 渐变 填充 。 
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为 合并 的 形状 设置 阴影 效果 ， 在 检查 器 中 
置 位 置 和 模糊 的 参数 。 


面板 中 选择 合并 的 形状 ， 执 行 “ 


状 一 拼合 ”命令 。 











| 展会 并 形 











创建 共享 样式 
同步 共享 样式 “S| 
重 在 共享 样式 “^ 习 S 
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53: 省 使 用 渐变 
插入 形状 后 ， 打 开 “ 填 充 ” 选 项 ， 如 图 5-13 所 示 ， 其 中 的 渐变 填充 包括 线性 渐变 、 径 向 渐 
变 和 角度 渐变 3 种 ， 如 图 5-14 所 示 。 它 们 在 Sketch 中 的 工作 原理 都 大 致 相同 。 





国 国 日 四 向 国 
Ee |) 

平 洞 不 通明 度 Ap 
失色 如 















: Ea i 多 ~ 
7 的 
旦 于 人 本 是 是 辐 昌 线性 渐变 径 向 渐变 角度 渐变 
图 5-13 图 5-14 
》 1. 线性 渐变 
单 击 检查 器 中 的 “线性 渐变 ”按钮 ， 会 看 见 图 层 上 出 现 了 由 两 个 点 或 多 个 点 组 成 的 渐变 线 ， 


上 面 每 一 个 点 都 是 一 个 颜色 滑 块 ， 滑 块 与 滑 块 之 间 是 两 个 颜色 的 色彩 过 渡 ， 如 图 5-15 所 示 。 
单 击 某 个 颜色 滑 块 ， 这 时 会 在 右边 的 拾 色 器 中 看 见 所 选 滑 块 的 颜色 ， 拖 动 拾 色 器 中 的 选取 点 
可 以 改变 滑 块 的 颜色 ， 滑 块 之 间 的 渐变 也 会 发 生 相 应 的 变化 ， 如 图 5-16 所 示 。 


加 加 昌国 铅 国 
2 


口 丰 庆 不 和 明朗 


T 拍 色 各 





图 5-15 图 5-16 
拖 动 渐变 线 中 的 滑 块 ， 可 以 调整 渐变 过 程 的 平滑 度 ， 如 图 5-17 所 示 。 移 动 渐变 线 的 起 点 和 


©2 
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终点 可 以 改变 渐变 的 方向 ， 如 图 5-18 所 示 。 


图 5-17 





图 5-18 
3》 2. 添加 和 删除 颜色 滑 块 


将 光标 移 至 渐变 线 ， 当 出 现 “+” 时 ， 在 渐变 线 上 单 击 ， 可 以 添加 一 种 颜色 ， 如 果 想 删除 颜色 
滑 块 ， 单 击 该 滑 块 ， 再 按 【 Delete 】 键 ， 或 是 按 【 Backspace 】 键 即 可 ， 如 图 5-19 所 示 。 


添加 颜色 删除 颜色 


图 5-19 
》 3. 径 向 渐变 
如 果 选 中 了 径 向 渐变 ， 那 么 渐变 线 上 的 第 一 个 点 便 是 径 向 渐变 的 中 心 ， 示 端的 点 则 决定 渐变 
的 范围 ， 如 图 5-20 所 示 。 在 渐变 色 的 外 圈 上 ， 会 发 现 另 一 个 点 ， 可 以 拖 动 它 使 渐变 范围 在 正 圆 
和 椭圆 中 变化 ， 如 图 5-21 所 示 。 
了 》4. 角度 渐变 


角度 渐变 在 图 层 上 以 中 心 点 顺 时 针 渐变 ， 如 图 5-22 所 示 。 可 以 在 其 中 任意 加 减 色彩 滑 块 ， 
方法 和 线性 渐变 相同 ， 在 渐变 线 上 移动 或 者 拖 动 色彩 滑 块 即 可 ， 如 图 5-23 所 示 。 


© 
. ~ —$ 
图 5-20 


图 5-21 5-22 
》 5. 使 用 渐变 条 





5-23 


Sketch 3 中 添加 了 一 个 新 的 传统 样式 的 渐变 条 ， 可 以 看 见 渐变 的 每 一 个 节点 ， 以 及 从 左 至 右 
的 变化 ， 如 图 5-24 所 示 。 


证 充 全 吊 
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不 通史 度 
故国 目 国 四 国 








口 平滑 不 过 明度 ap 


图 5-24 
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单 击 选择 渐变 中 的 某 个 颜色 滑 块 ， 按 1 ~ 9 的 数字 键 可 以 在 10% ~ 90% 
的 位 置 移动 滑 块 。 当 按 [ 5 】 键 时 ， 可 以 将 滑 块 的 位 置 放 在 中 间 。 如 果 想 在 
两 个 滑 块 正中 间 添 加 滑 块 ， 按 【= 】 键 即 可 。 按 【Tab 】 键 可 以 在 不 同 颜色 
滑 块 中 切换 ， 按 方向 键 可 对 滑 块 做 细微 调整 。 按 住 【 Shift 】 键 的 同时 按 方 
向 键 ， 每 次 以 10% 的 位 置 滑动 。 





》 6. 设置 描 边 渐变 

在 Sketch 中 , 同样 可 以 对 描 边 添 加 渐变 , 勾 选 “ 描 边 ” 复 选 框 , 单 击 “ 描 边 ”面板 中 的 “颜色 ” 
按钮 , 可 以 看 到 颜色 选项 , 在 描 边 颜色 选项 中 , 包括 纯色 、 线 性 渐变 、 径 向 渐变 和 角度 渐变 4 个 选项 ， 
如 图 5-25 所 示 。 与 “填充 ”面板 不 同 的 是 缺少 了 噪点 和 图 案 。 








图 5-25 





5.1.2 绘制 播放 和 暂停 按钮 


播放 和 暂停 按钮 在 播放 器 中 是 必 不 可 少 的 ， 设 计 中 并 不 需要 掺 杂 太 多 的 内 容 ， 所 应 用 的 符号 
已 经 被 大 众 所 熟 悉 认 可 。 需 要 做 的 是 在 整体 设计 上 保持 一 致 ， 设 计 一 组 按钮 中 的 不 同 单个 按钮 ， 
对 已 经 设计 完成 的 按钮 进行 编组 和 复制 图 层 组 ， 以 及 删除 重复 多 余 元 素 ， 是 一 个 既 快 捷 又 有 效 的 


方法 。 





在 画布 中 空白 处 右 击 ， 在 弹出 的 快捷 菜单 中 
选择 “粘贴 到 这 里 ”选项 。 | 














在 图 层面 板 中 选择 “循环 ”图 层 组 ， 右 击 ， 
在 弹出 的 快捷 菜单 中 选择 “拷贝 ”选项 。 













































9 图 层 组 中 的 Combined Shape 选择 复制 的 “循环 ”图 层 组 中 的 Combined 
层 , 按 [ Delete ] 键 将 其 删除 , 按 住 [ Shift】 . 中 ，Shape 图 层 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选 
| 择 “拷贝 样式 ”选项 。 : 
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AT 右 3» 
05 菜单 中 选择 “粘贴 样式 ”选项 ， 调 整 图 层 | 
并 修改 图 层 组 的 名 称 。 


















































知识 链接 


图 案 填充 


单 击 “ 填 充 ” 按 钮 ， 打 开 “ 填 充 ” 面 板 ， 如 图 5-26 所 示 。 单 击 “ 图 案 填 充 ” 按 钮 ， 可 以 
在 “全 局 图 案 ” 中 选择 一 种 填充 图 案 ， 也 可 以 单 击 
Choose Image( 选择 图 片 ) 按 钮 选择 图 片 , 单 击 “ 填 
充 ” 选 项 ， 打 开 填 充 方式 列表 ， 在 Sketch 中 提供 
了 4 种 填充 模式 ， 分 别 是 填充 、 适 应 、 拉 伸 和 平 铺 ， 
如 图 5-27 所 示 。 

默认 情况 下 为 “填充 ”模式 ， 该 模式 将 图 案 完 
整地 填充 到 图 形 中 ,不 会 发 生 缩 放 等 变换 ,如 图 5-28 


所 示 。 


如 果 选 择 “ 适 应 ”模式 ， 当 图 形 的 形状 发 生变 
换 时 ， 图 案 会 随 着 图 形 的 变换 自动 变换 ， 以 适应 图 





形 ， 效 果 如 图 





5-29 所 示 。 此 模式 下 图 





案 不 会 发 生 
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图 5-26 


图 5-27 
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[md 口 | 填充 次 十 于 充 全 十 
| 区 x er Es 目 oo 
搓 辽 交 二 | | | 国 国 目 国 回国 
国 国 | | 水 平局 中 ms Choose image 
J 闷 二 一 
/ T 全 局 图 案 
- 北国 改 二 捧 + 
口 > 文档 图 案 
图 5-28 图 5-29 
如 果 选 择 “ 拉 伸 ” 模 式 ， 当 图 形 的 形状 发 生变 换 时 ， 图 案 会 自动 缩放 以 适应 图 形 的 变换 ， 效 





果 如 图 5-30 所 示 。 
如 果 选 择 “ 平 铺 ” 模 式 ， 图 案 将 以 平 铺 的 方式 填充 图 形 。 用 户 可 以 通过 拖 动 调整 下 方 的 滑 块 
或 者 在 文本 框 中 手动 输入 调整 平 铺 图 案 的 大 小 ， 如 图 5-31 所 示 。 





填充 次 十 


I | 正 党 | |100% 
Eo E93 不 过 明度 


加 加 日 国 图 力 


Choose Image... 
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图 5-31 






































5.1.3 绘制 语音 和 关闭 按钮 


关闭 按钮 通常 情况 下 意味 着 停止 和 终止 。 现 在 APP 已 经 越 来 越 智 能 化 ， 有 些 播放 器 已 经 拥有 
了 声音 识别 寻找 歌曲 的 功能 ， 作 为 在 功能 和 作用 上 更 为 突出 的 按钮 ， 有 时 要 巧 施 手段 ， 让 它 变 得 
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继续 插入 宽 和 高 的 值 为 16 的 矩形 ， 这 一 次 
的 角 半 径 人 i 置 左下 角 和 右 下 角 的 




























































































”| 插入 宽 和 高 为 20 的 贺 角 矩形 ， 设 置 左下 角 和 取消 色 选 “填充 ” 复 选 框 ， 执 行 “ 图 展 一 路 | 
| 口 | 右 下 角 的 贺 角 半径 值 为 10。 | 中 6， 径 一 剪刀 ”命令 将 横 线 盘 去 ， 执行 “图 层 | 














一 转化 为 轮廓 ”命令 。 























选 
i 样式 ”选项 ， 将 相关 





| 一 合并 彩民 -所 全" 入 。 
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同 的 方法 继续 复制 图 层 组 ， 修改 E 0 插入 正 圆 形状 ， 在 检查 器 中 设置 描 边 的 值 为 6。 
， 删 除 不 需要 的 图 层 。 
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蕊 Re 兴 ” 噪 点 填充 

单 击 “ 杂 色 填 充 ” 按 钮 ， 如 图 5-32 所 示 。 在 该 模式 下 可 在 Type( 类 型 ) 处 选择 杂 色 类 型 ， 
包括 原始 、Black、 白 色 和 颜色 4 种 类 型 ， 如 图 5-33 所 示 。 用 户 可 以 通过 拖 动 下 方 的 “强度 ” 滑 
块 或 者 在 文本 框 中 输入 数值 来 控制 杂 色 的 强度 。 









































男 角 
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好 L 5 
强度 bs 36% 








其 中 “原始 ”选项 掺 杂 黑 色 与 白色 的 噪点 比较 均衡 ， 选 择 Black 选项 ， 白 色 品 点 较 多 ， 如 
图 5-34 所 示 ; 选择 “白色 ”选项 ， 黑 色 噪 点 居多 ， 如 图 5-35 所 示 ; 选择 “颜色 ”选项 ， 可 以 
看 到 杂乱 的 颜色 噪点 ， 如 图 5-36 所 示 。 





| ES 3] 





上 EE 从 十 


























5.1.4 ”绘制 喇叭 按钮 


这 里 的 喇叭 按钮 ， 和 语音 通话 中 的 外 放 功 能 一 样 ， 相 比 
于 在 APP 上 单 击 这 个 按钮 ， 去 按 耳机 上 的 按钮 是 一 件 麻烦 的 
事 。 下 面 通过 本 案例 绘制 一 个 喇叭 按钮 ， 另 外 ， 用 户 可 以 在 
此 处 学 习 Sketch 中 “剪刀 ”工具 的 使 用 方法 。 
















































使 用 相同 的 方法 ， 复 制图 层 组 ， 删 掉 多 余 








层 ， 插 入 宽 和 高 为 7 的 矩形 和 宽 为 12、 高 为 


19 的 矩形 。 



































具 栏 上 的 “变换 ”按钮 ， 拖 动 较 大 的 
状 的 边线 调整 形状 。 : 










































半径 为 2。 











插入 宽 和 高 为 60 的 正 
充 ” 复 选 杠 
































选择 两 个 形 ; 
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右 击 对 象 ， 
中 看 到 弧 形 的 宽 和 高 为 30。 

















执行 “显示 一 画布 一 显示 标尺 ” 


十 




















显示 标尺 。 复制 贺 

















命令 ， 在 画布 





弧 线 段 , 按 住 [ Shift 


建 调整 弧 形 大 小 。 







+Alt ] ; 
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同时 选中 3 个 辆 弧 形 状 , 单 击 工具 栏 上 的 “ 旋 
虽 转 " 按钮， 移动 环绕 点 的 位 置 ， 拖 动 姑 标 旋 ， 


















































用 之 前 相同 的 方法 ， 
钮 ， 结 束 旋 转 状态 ， 移 动 3 个 圆 红 形 状 到 | 口 。 到 最 终 效果 。 


























所 过 人 时 移动 界面 中 色彩 的 应 用 
在 UI 设计 中 ， 颜 色 的 使 用 直接 决定 了 作品 的 成 败 。 有 时 候 ， 两 个 内 容 相 同 的 界面 ， 仅 仅 因为 
颜色 的 不 同 导致 极 大 的 视觉 差异 是 很 正常 的 。 在 现代 UI 设计 中 ， 为 了 实现 简洁 明快 的 设计 效果 ， 
通常 只 会 使 用 较 少 的 颜色 。 
在 UI 设计 中 ， 颜 色 用 于 表达 互动 性 ， 传 递 灵活 性 ， 并 提供 视觉 的 连续 性 。 在 iOS 系统 中 内 
置 了 几 种 颜色 ， 用 作 界 面 设计 的 参考 和 标准 。 如 图 5-37 所 示 为 iOS 系统 中 内 置 的 应 用 程序 的 
颜色 。 
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图 5-37 





5.1.5 ”绘制 选择 、 撤 销 、 随 机 和 退出 按钮 





选择 、 撤 销 和 退出 等 按钮 ， 在 插入 器 按钮 中 处 于 一 个 相对 比较 弱化 的 地 位 ， 在 其 他 的 按钮 设 





计 中 这 种 





但 并 不 竺 列 了 J 引信 注目 。 




















在 检查 器 中 分 别 


层级 关系 也 是 常见 的 , 有 些 是 非常 重要 的 , 有 些 是 





et 
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Hex(EEEEEE—D8D8D8) 
Hex(979797) 
Hex(000000) 
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比较 重要 的 , 也 有 些 虽 然 是 必 不 可 少 的 ， 
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中 | 











直入 宽 和 高 为 53 的 正 国 ， 在 编辑 器 中 勾 选 填 ; 
| 充 " 和 “内 阴影 ” 复 选 框 ， 填 充 颜色 Hex 值 为 ; 

i F3FOF0， 内 阴影 Hex 值 为 000000, Y 值 : 
5 1， 模 糊 值 为 3。 : 











| 为 7 的 矩形 ， 设 置 旋转 角度 分 } 别 为 45° 


I 








| 分 别 插入 宽 为 20、 高 为 7 和 宽 为 30、 高 | 


| -45" 。 | 



































位 置 221 
x 
大 小 20 
3 
变换 一 攻 汪 EL- 翅 
旋转 页 转 
位 置 上 
x 和 
大 小 30 él7 | 
E3 高 i 
变换 -450 | 
旋转 
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| ”| 同时 选中 两 个 矩形 ， 在 工具 栏 上 单 击 “ 合 
.| 形状” 按钮， 在 检查 器 中 设置 填充 颜色 和 描 |] 
边 颜色 ， 描 边 相 细 为 0.5。 


| 国 
| [EGG 5 17 5 | 1o0 i => 
: Hex R G B A : 
| OE 国 2 
| : 


| | 合并 形状 ， 设 置 填充 颜色 和 描 边 颜色 与 之 前 。 | 执行 “显示 一 画布 一 显示 标尺 ”命令 ， 在 画布 
,中 .的 相同， 创建 编组 并 修改 图 层 组 的 名 称 。 。 [日 中 显示 标尺 。 复 制 国 红 线段 , 按 住 LShit+Al | 


| 键 调整 弧 形 大 小 。 














复制 相关 图 层 ， 插入 三 角形 ， 并 使 用 矢量 
i 具 绘制 形状 ， 设 置 描 边 粗细 为 0.5。 



























: 





























































XH 人, 
] 移动 复制 的 形状 到 合适 的 位 置 ， 合并 形状 并 | 了 | 关 图 层 ， 合 并 形状 ， 填充 基色 和 和 措 边 颜色 与 
| i 再 次 进行 复制 ， pe ! 


刚刚 绘制 的 其 他 形状 相同 。 复制 相关 
调整 图 层 顺 序 ， 创 建 图 层 组 并 重 命名 。 














i 





院 
LELLLLLLL 




















重 入 三 角形 和 和 矩形 ， 再 插入 描 边 粗 细 为 4 的 使 用 之 前 相同 的 
司 角 短 形 ， 并 在 使 用 前 去 顶层 对 其 裁剪, 并 ;| 
将 其 转化 为 轮廓 。 
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由 4::: 对 > 布尔 运算 

Sketch 中 的 标准 图 形 并 不 能 满足 UI 设计 中 的 所 有 需要 ， 更 多 的 时 候 需要 自己 创作 。 这 时 使 用 
矢量 工具 并 不 是 首选 ， 最 快速 有 效 的 方法 是 能 否 通过 将 几 个 基本 图 形 结合 成 一 个 复杂 的 图 形 ， 或 者 
将 很 多 复杂 的 图 形 轻易 地 拆 分 成 基本 的 图 形 ， 这 种 方式 需要 通过 布尔 运算 来 实现 。 

Sketch 中 可 以 直接 插入 的 图 形 都 只 有 一 个 路 径 ， 而 一 个 图 形 是 可 以 有 多 个 子路 径 的 。 在 
Sketch 中 使 用 布尔 运算 ， 会 通过 具体 的 布尔 运算 将 最 上 层 的 图 形变 成 下 一 层 图 形 的 子路 径 ， 并 且 
可 以 随时 调整 每 一 个 子路 径 。 

布尔 运算 的 方法 有 4 种 ， 包 括 合并 形状 、 减 去 顶层 、 区 域 相交 


和 排除 重臣 形状 ， 如 图 5-38 所 示 。 这 4 种 运算 的 按钮 默认 放 在 工 前 外 本 哩 
具 栏 里 ， 用 户 可 以 轻松 地 找到 并 使 用 它们 。 | 合并 形状 | 
5-38 
》1. 合并 形状 


单 击 工具 栏 上 的 “合并 形状 ”按钮 后 ， 其 结果 是 得 到 两 个 矢量 
形状 的 总 和 。 如 果 两 个 形状 的 填充 、 描 边 等 样式 不 同 ，Sketch 默认 将 置 于 顶层 的 形状 式 作为 合并 
后 的 形状 样式 ， 如 图 5-39 所 示 。 




















图 5-39 
》 2. 减 去 顶层 


减 去 顶层 是 将 两 个 或 两 个 以 上 的 形状 相交 区 域 从 下 面 的 图 层 中 减 去 ， 减 去 顶层 后 ， 只 看 到 下 
面 的 图 层 ， 如 图 5-40 所 示 。 




















图 5-40 


》3. 区 域 相交 
选择 两 个 或 两 个 以 上 的 形状 , 单 击 工具 栏 上 的 “区 域 相交 ”按钮 后 , 会 保留 形状 区 域 重 二 的 部 分 ， 
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默认 将 置 于 最 下 层 的 样式 作为 区 域 相交 后 的 最 终 样式 ， 如 图 5-41 所 示 。 


Page 1 oO 
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图 5-41 





















































》4. 排除 重生 
排除 重 霹 形状 的 结果 是 只 保留 原 图 形 不 重 芭 的 部 分 ， 它 是 区 域 相交 这 一 布尔 运算 的 反 向 ， 如 
5-42 所 示 。 








页 面 二 
m1 蝇 | 

O om 

口 Rectangle 














图 5-42 
在 运用 布尔 运算 后 ， 可 以 从 图 层 菜单 中 查看 子路 径 图 层 列表 ， 图 层 列表 左 侧 有 一 个 下 拉 箭 头 ， 
单 击 此 处 可 以 展开 或 关闭 子路 径 列表 。 每 一 个 子路 径 的 布尔 运算 选项 都 可 以 在 右 侧 的 按钮 中 查看 
并 单独 修改 ， 如 图 5-43 所 示 。 


























图 5-43 
通过 布尔 运算 的 形状 的 子路 径 可 以 在 图 层 列表 中 看 到 ，Sketch 在 运算 后 仍然 会 保留 两 个 子路 
径 的 可 修改 状态 ， 若 要 进行 彻底 合并 ， 可 以 执行 “图 层 一 合并 形状 一 拼合 ”命令 ， 如 图 5-44 所 示 。 



































页 面 十 日 O 页 面 十 | [= [=] 
页 面 1 日 页 面 1 | 
O ow 加 | 
癌 Rectangle 
图 5-44 


执行 “图 层 一 合并 形状 一 分 离 ” 命 令 ， 可 以 拆 分 合并 的 形状 ， 如 图 5-45 所 示 。 
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图 5-45 
需要 注意 的 是 ， 此 处 只 能 分 离 通 过 布尔 运算 的 形状 图 层 ， 而 经 过 拼合 的 形状 在 没有 子路 径 的 
情况 下 ， 是 无 法 分 离 的 。 当 Sketch 不 能 完成 拼合 时 ， 2 警告 提示 ， 如 图 5-46 所 示 。 
了 无 法 将 形状 拼合 为 单一 路 径 。 
仿 和 因为 它 的 子路 径 不 能 简化 成 一 个 连 








图 5-46 


5.1.6 绘制 按键 和 滑 杆 按钮 


通过 对 渐变 的 巧妙 运用 ， 可 以 做 到 使 元 素 具有 凹凸 感 ， 从 背景 中 分 离 的 元 素 在 视觉 上 很 有 触 
碰 感 ， 类 似 按键 或 滑动 的 按钮 ， 在 这 方面 的 表现 往往 是 略微 有 效 一 些 。 


| 插入 宽 为 170、 高 为 25 的 贺 角 短 形 ， 在 检查 | ”| 复制 圆 角 矩 形 ， 修 改 宽 为 165、 高 为 20， 在 | 
| 器 中 勾 选 “填充 ”“ 描 边 ” 和 “阴影 ” 复 选 杠 .上 0 | 检查 器 中 设置 各 项 参数 。 | 


~ 


: 
: 
"i 
Hex (B4EC51- 429321) i | 
Hex ( 429321 一 B4EC51) Ce 到 ; 
Hex (7ED321) Ne Es | 
内 时 | | 
EE se le 
me 
{ 
{ 
{ 
| 
{ 
| 




































填充 ; 线性 浙 空 Hex ( E2E2E2- FFFFFF-E7E7E7) 
描 边 ; 线性 渐变 Hex ( E7E7E7…E2E2E2 FFFFFF ) 
描 边 ; 线性 渐变 Hex ( 000000) 
































层 得 








LE 


us i 总 [ee 上 再 日 Nroo% 5 { 
ET 
措 边 We 


Hex (F7F8F6— D1D1D1) lc | 
Hex (F7F8F7 -» CCCDCB) Ed : 
Hex (C3C3C3) 
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有 入 帘 为 265、 高 为 11 的 圆 角 矩 形 ， 国 负 : i 
i 径 为 5.5。 设置 该 矩形 的 填充 方式 为 线性 渐变 。i 



































入 宽 为 17、 高 为 25、 圆 角 半径 为 5 的 
矩形， 填充 方式 为 线性 渐变 。 









复制 贺 角 矩形 ， 并 调整 帘 为 14、 高 为 21， 设 
置 线性 渐变 参数 , 插入 宽 为 3、 高 为 13 的 矩形 。; 














Qa0-0 | i ge 9 


地 一 Hex (EAE9E9—DBD9D9—* F4EDED) 


Hex (9B9B9B ) 


































继续 绘制 贺 角 矩形 ， 宽 为 53、 高 为 20、 圆 角 
半径 为 9.5， 设 置 填充 和 描 边 均 为 线性 渐变 。 























i F 9 [zm lom 
| 上 一 



































琅 3 人 3 堵 > 按钮 是 用 户 体验 的 重要 因素 


》 1. 形状 、 阴 影 和 亮点 
根据 网 页 或 移动 端 界面 的 风格 来 确定 按钮 的 形状 ， 这 其 中 保持 设计 上 的 一 致 性 比 起 创意 更 加 
重要 , 无 论 选 择 哪 种 形状 , 都 会 确保 用 户 能 够 识别 所 有 UI 元素 作 为 按钮 , 这 是 最 基本 的 原则 和 宗旨 。 
当下 被 载 入 数字 世界 最 常见 的 形状 是 矩形 按钮 , 也 会 使 用 更 具 创 意 的 圆 形 、 三 角形 或 其 他 形状 ， 
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只 要 在 整体 上 保持 一 致 性 , 能 够 使 用 户 拥有 易 识别 、 更 熟悉 的 感 观 体验 , 让 用 
是 一 个 美观 而 有 用 的 设计 。 如 图 5-47 所 示 为 形状 各 异 的 一 组 按钮 设计 。 

















户 感受 到 交互 的 效果 ， 








阴影 会 使 按钮 从 背景 中 突显 出 来 ， 成 为 界面 中 更 容易 识别 或 可 点 击 的 元 素 ， 即 使 是 扁平 的 按 
钮 也 应 有 此 特征 ， 因 为 它 看 起 来 像 被 按压 下 去 的 元 素 。 当 一 个 按钮 投射 一 个 微妙 的 阴影 ， 用 户 会 
在 第 一 意识 便 有 它 是 可 用 于 交互 的 感受 ， 如 图 5-48 所 示 ， 按 钮 在 扁平 设计 中 也 要 略 施 阴影 。 












































和 he 2 
有 到 二 去 去 : 4 全 
yfSe® 
图 Q 
图 5-47 图 5-48 


》 2. 一 定 要 有 标签 

作为 功能 的 引导 和 指示 ， 按 钮 必须 有 一 个 明确 的 合 
义 ， 文 字 或 图 形 标注 是 按钮 设计 中 必 不 可 少 的 一 项 。 

要 引导 用 户 如 何 操作 ， 需 要 清晰 明了 地 告诉 用 户 这 
个 按钮 的 动作 所 带 来 的 结果 ， 操 作 按 钮 应 该 确认 该 按钮 
的 作用 和 任务 是 什么 ， 这 个 任务 要 表达 得 清楚 和 具体 。 








不 要 让 用 户 去 寻找 按钮 ， 要 使 按钮 可 以 轻松 地 被 找 
到 或 在 被 期 望 看 到 的 位 置 上 。 如 图 5-49 所 示 为 一 组 视 
觉 呈 现 力 较 强 的 按钮 设计 。 

3》 3. APP 按钮 分 类 

APP 界面 中 主要 有 4 种 属性 的 按钮 ， 分 别 为 普通 按钮 、 可 点 击 按钮 、 
按钮 规范 。 























图 5-49 


不 能 点 击 按钮 和 选中 





无 论 是 iOS 平台 或 是 Android 平台 ， 按 钮 切 图 一 般 存储 为 PNG 格式 最 佳 ， 在 结构 上 分 为 长 、 





中 和 短 3 种 ， 因 不 同 功能 和 场景 需要 ， 设 计 中 要 
注意 使 用 不 同 的 样式 和 颜色 。 在 应 用 方面 也 分 为 
重要 按钮 、 次 重要 按钮 和 普通 按钮 。 

重要 按钮 一 般 是 指 在 界面 中 占 比 较 大 、 置 于 
醒目 位 置 的 按钮 ， 通 常用 来 执行 重要 操作 ， 常 被 
吸附 在 顶部 或 底部 位 置 ， 如 搜索 、 确 定 、 提 交 等 




































































划 汉 


操作 ， 有 时 也 会 被 置 于 最 中 间 处 ， 醒 目 和 突出 的 。 ”一 > 
表现 是 其 最 主要 的 特点 ， 重 要 的 、 醒 目的 按钮 显 ~ 一 


见 一 示 [本 | 
而 易 见 ， 如 图 5-50 所 示 。 | ED 





次 重要 按钮 主要 包括 清空 、 退 出 和 说 明 性 的 
按钮 等 , 不 是 特别 重要 。 而 优先 级 最 低 的 一 种 按钮 ， 
主要 和 文字 或 图 标 一 起 出 现 ， 例 如 筛选 、 排 序 等 。 
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图 5-50 


3》 4. 按钮 的 尺寸 和 填充 色 

按钮 的 大 小 要 考虑 界面 上 其 他 元 素 的 搭配 和 整体 结构 的 配 比 ， 为 便于 用 户 进行 互动 ， 它 要 被 
设计 得 恰到好处 。 

10mmx 10mm 是 良好 的 最 小 触摸 目标 尺寸 。 在 一 般 情 况 下 ， 易 于 操作 的 尺寸 范围 在 
10 ~ 14mm 之 间 ， 这 是 指 肚 的 触摸 尺寸 ， 而 指 尖 的 尺寸 在 8 ~ 10mm 之 间 ， 如 果 按 钮 被 置 于 
PC 端 界面 ， 当 鼠标 和 键盘 为 主要 方法 时 ， 可 适当 放宽 按钮 ， 以 适应 更 多 的 Ul 元 素 。 

另外 ， 在 设计 时 还 要 考虑 按钮 元 素 的 大 小 ， 以 及 可 点 击 元 素 之 间 的 距离 和 填充 ， 这 样 将 有 助 
于 分 离 控件 ， 并 为 用 户 界面 提供 足够 的 呼吸 空间 。 


不 同 的 材质 有 不 同 的 触感 和 视觉 体现 ， 质 感 设计 的 形式 
是 美学 中 的 一 个 重要 概念 ， 能 使 元 素 看 上 去 更 有 物体 感 和 触 
碰 感 ， 具 有 独立 的 审美 价值 。 在 质感 设计 时 ， 要 求 更 多 地 运 
用 渐变 、 阴 影 等 手段 ， 使 按钮 看 上 去 更 饱满 、 更 有 层次 ， 如 
图 5-51 所 示 。 


























绘制 质感 按钮 
源 文件 : 源 文件 \ 
视频 :视频 \ 应 用 案 习 .mp4、5.2.2.mp4、5.2.3.mp4 
案例 分 析 设计 分 析 色彩 分 析 
本 案例 为 绘制 质感 按 本 案例 设计 和 绘 ” 主 色 : 


钮 ， 频 繁 使 用 线性 渐变 、 制 了 金属 拉丝 、 塑 料 | | 
角度 渐变 和 径 向 渐变 对 ”纹理 及 通 透 水 晶 3 个 


渐变 功能 进行 了 详细 讲解 ，。 质感 按钮 ， 这 3 个 按 
还 介绍 了 如 何在 检查 器 中 钮 给 人 以 不 同 的 材质 。 [国有 国 国生 


设置 阴影 内 阴影 和 模糊 。 感受 和 视觉 体验 ， 具 本 案例 分 别 使 用 了 深 灰 色 、 浅 灰色 、 橘 色 
通过 本 案例 ， 用 户 可 以 了 有 视觉 冲击 力 , 饱满 、 。 和 亮 绿色 ， 体 现 了 沉稳 、 鲜 活 和 亮丽 的 感觉 。 深 
解 高 光 、 投 影 在 设计 中 的 。 ”丰富 且 吸 引 眼 球 。 灰色 应 用 在 金属 材质 按钮 上 能 给 人 以 厚重 的 感 
运用 , 并 设计 出 更 有 质感 、 觉 ， 显 得 更 有 质地 ; 浅 灰色 与 橘 色 的 搭配 让 人 既 
视觉 效果 更 好 的 Ul 元 素 。 有 热度 又 不 失 高 贵 以 亮 绿色 为 主 的 水 昂 按钮 ， 


使 用 由 深 到 浅 的 颜色 过 渡 ， 令 其 丰富 而 立体 。 


5.2.1 绘制 金属 拉丝 质感 按钮 


世界 上 本 没有 银色 ， 也 没有 所 谓 的 金属 的 感觉 ， 那 种 金属 的 感觉 都 是 通过 渐变 来 实现 的 ， 是 





























一 种 颜色 从 深 到 浅 再 到 深 反复 过 渡 的 表现 。 通 过 本 案例 ， 用 户 可 以 了 解 金属 质感 在 视觉 上 的 感受 
le 
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# 径 为 25， 勾 选 “了 













































状 ， 复制 正 圆 形状 ， 按 住 [ShiftrAlt] 键 油 整 复 ， 
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过 分 :时 阴影 和 内 阴影 的 设置 

阴影 和 内 阴影 会 有 相同 的 参数 设置 ， 区 别 在 于 阴影 是 在 图 形 外 部 ， 内 阴影 是 在 图 形 内 部 。 每 
个 阴影 都 有 自己 的 混合 模式 ， 用 户 可 以 在 颜色 弹出 窗口 中 调试 。 每 个 阴影 同时 还 有 一 个 扩散 值 ， 
它 会 增强 对 象 的 阴影 效果 。 
勾 选 检查 器 面板 中 的 “阴影 ” 复 选 框 ， 即 可 为 图 形 添加 阴影 样式 。 除 了 可 以 设置 阴影 的 颜色 外 ， 
用 户 还 可 以 在 文本 框 中 输入 数值 ,实现 对 阴影 的 方向 模糊 效果 和 模糊 范围 的 控制 ,如 图 5-52 所 示 。 












































图 5-52 
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| 添加 渐变 节点 ， 反 复 使 用 Hex . 什 FFFFFF : :06: ; 制 形状 的 大 小 ， 修 改 渐变 参数 ， 将 反复 使 用 ; 











me im 百 
ERFRFPRF 时 90 蒜 二 4 角度 源 变 (B6B6B6-"FFFFFF- 反 复 ) |ax ot | 
二 (000000) 。 | 生日 5 
可 e+ 





单 击 “ 阴 影 ”参数 后 面 的 “+” 按 钮 ， 可 以 创建 一 个 新 的 阴影 样式 。 同 时 创建 多 个 样式 供用 户 
选择 使 用 。 在 对 象 上 右 击 ， 选 择 “ 删 除 ” 选 三 0 | 
项 ， 即 可 删除 阴影 样式 ， 如 图 5-53 所 示 。 | 

内 阴影 样式 与 阴影 样式 具有 相同 的 参 
数 , 使 用 方法 也 大 致 相同 , 适用 于 文字 图 层 ， 
内 阴影 的 模糊 半径 设置 为 0 时 ， 效 果 锐 利 
清晰 ， 如 图 5-54 所 示 。 增 加 模糊 值 的 参数 
会 使 文字 变 得 柔和 ， 如 图 5-55 所 示 。 介 于 
文字 在 UI 设计 中 需要 表现 清晰 ， 扩 展 并 不 | - o | 
适用 于 文字 图 层 。 图 5-53 
















































































+ + 
Some 下 四 和 Some 5 让 和 
ee a 


5.2.2 ”绘制 纹理 质感 按钮 


按钮 设计 中 层次 的 明确 体现 ， 会 给 人 以 按 下 去 或 滑动 的 感觉 ， 纹 理 及 材质 的 感觉 在 绘制 过 程 

中 巧妙 地 施加 一 些 元 素 可 得 到 。 本 案例 将 制作 一 个 可 以 推动 的 带 有 纹理 的 塑料 材质 的 按钮 ， 很 有 
交互 的 欲望 和 感觉 。 通 过 本 案例 ， 用 户 可 以 了 解 此 类 按钮 的 绘制 过 程 ， 并 且 了 解 如 何在 Sketch 中 
通过 应 用 图 案 填 充 进行 设计 。 

插入 宽 为 114、 高 为 50 的 圆 角 和 矩形 ， 设 置 插入 宽 为 107、 高 为 40 的 贺 角 矩形 ， 设置 加 | 
上 01 i 角 半 径 为 25， 勾 选 “ 平 滑 圆 角 ” 复 选 框 , 设 ; i0a | 角 半径 为 25， 在 检查 器 中 设置 填充 方式 为 线 
: 置 填充 方式 为 线性 渐变 ， 在 检查 器 中 设置 渐 i 性 渐变 ， 勾 选 “ 阴 影 ” 复 选 框 。 
变 参数 。 

























































| [x lv | 
Hex (B1BOBO-— FCFBFB ) D - ES Es 上 
措 边 言 十 | 
9 号 © Dlias) | ns 
Hex (9F9F9F—FCFCFC— D2DODO) CE A 
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插入 宽 为 66、 高 为 40、 # 径 为 20 的 
i 角 和 矩形， 勾 选 “填充 ”和 “阴影 ” 复 选 框 ， 
i 设置 填充 颜色 和 阴影 颜色 。 
































复制 圆 角 矩形 ， 修 改 被 复制 
为 35， 25， 勾 选 “ 平 ; 有 
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形状 ， 设 置 填充 训 
色 Hex 值 为 DeD8D8, 并 将 其 移动 到 合适 的 : 
位 置 。 


| 设置 贺 
05 线性 新 变 磊 色 参 数 ， 单 证 “填充 ”面板 右上 06 
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Hex (EDEDED-B6B2B2-D6D6D6) 0 


DaDa08 26 216 [216 100 































复制 正 圆 形状 ， 修 改 宽 和 高 为 19， 修 改 填充 
方式 为 线性 渐变 ， 设 置 新 变 颜色 参数 。 
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Hex (757373 一 FOECEC ) 

















知识 链接 模糊 加 
选择 检查 器 面板 中 的 “高 斯 模糊 ”选项 ， 在 弹出 的 菜单 |。 动感 模 著 
中 可 以 看 到 Sketch 提供 了 4 种 不 同 的 模糊 方式 ， 即 高 斯 模 ”放大 模 基 Dopx | 
糊 、 动 感 模糊 、 放 大 模糊 和 背景 模糊 ， 如 图 5-56 所 示 。 la 
》1. 高 斯 模糊 图 5-56 


当 用 户 为 了 减少 图 像 噪点 或 者 降低 图 像 细 节 层 次 时 ， 可 以 选择 添加 高 斯 模糊 样式 。 高 斯 模糊 可 以 
实现 均匀 的 模糊 效果 。 勾 选 “ 高 斯 模糊 ” 复 选 框 ， 即 可 为 图 形 添加 高 斯 模糊 效果 ， 如 图 5-57 所 示 。 

》2. 动感 模糊 

动感 模糊 样式 可 以 模拟 运动 时 的 模糊 效果 。 勾 选 “动感 模糊 ” 复 选 框 ， 即 可 为 图 形 添加 动感 
模糊 效果 ， 如 图 5-58 所 示 。 























oe D 
| 一 一 一 动感 模糊 人 
| I 
图 5-57 图 5-58 
3》 3. 放大 模糊 


缩放 模糊 样式 可 以 实现 从 一 个 特定 的 点 向 外 模糊 的 效果 。 勾 选 “ 放 大 模糊 ” 复 选 框 ， 即 可 为 
图 形 添加 放大 模糊 效果 ， 如 图 5-59 所 示 。 

拖 动 调整 “半径 ”的 数值 ， 实 现 不 同 的 放大 模糊 效果 。 单 击 “Origin( 起 点 )” 选 项 后 面 的 
Edlit( 编辑 ) 按 钮 , 即 可 进入 编辑 状态 , 拖 动 模糊 的 起 点 , 可 以 实现 不 同 的 模糊 角度 , 如 图 5-60 所 示 。 





sketch = —: Sketch = 


图 5-59 图 5-60 
了 》4. 背景 模糊 
使 用 背景 模糊 时 ， 需 要 确认 有 一 个 半 透 明 的 图 层 在 表面 应 用 了 背景 模糊 ， 这 样 下 层 的 内 容 才 
b 现 模糊 效果 。 
模糊 是 一 种 非常 消耗 资源 的 演 染 效果 ， 需 要 占用 更 多 的 内 存 空间 和 处 理 器 资源 ，UIl 设计 中 建 
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议 尽 量 少 使 用 ， 尽 量 选 择 使 用 普通 模糊 。 


5.2.3 绘制 水 晶 质 感 按钮 


晶莹 剔透 的 按钮 设计 会 给 人 眼前 一 亮 的 感觉 ， 通 常会 有 渐变 、 高 光 、 阴 影 、 描 边 和 投影 ， 添 
加 一 些 样式 ， 可 以 让 水 晶 、 果 冻 类 设计 看 上 去 更 有 按钮 的 感觉 ， 更 加 美观 。 通 过 本 案例 用 户 可 以 
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描 边 : Hex (417505) 局 





























案 填 充 ， 设 置 图 案 填充 的 参数 。 注 意 设置 | |] 吓 | 性 渐变 填充 。 
案 填 充 的 不 透明 度 为 20%。 
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i 线性 新 变 : Hex (68FE2B-，67B00A 90F003) 器 |。 |: | jo 
:| 描 边 颜色 : Hex (294A01) 
:| 阴影; Hex (000000) 

{| mB: Hex (FFFFFF) 

























第 5 章 按钮 设计 


















































层 编组 ， 并 修改 图 层 组 的 名 称 。 
































中 后 榨 杀 一 已 


OF OP ee < 


a | | 








:过 皮下 2 遇 使 用 动态 模糊 调整 图 层 

》 视频 : 视频 \ 操 作 指 南 \ 使 用 动态 模糊 调整 图 
层 .mp4 

[GE 新 建 Sketch 空白 文档 ， 将 素材 图 像 “fluffy. 


jpg” 拖 入 文档 中 ， 如 图 5-61 所 示 。 
单 击 工具 栏 上 的 “插入 ”按钮 ， 选 择 “ 形 状 


























一 圆 角 矩形 "选项 , 在 画布 中 拖 动 鼠标 绘制 圆 角 矩 形 ， 
如 图 5-62 所 示 。 














设置 圆 角 矩形 的 填充 不 透明 度 为 50%， 如 
图 5-63 所 示 。 

在 模糊 面板 中 勾 选 “背景 模糊 ” 复 选 框 ， 设 
置 半径 为 20px， 可 以 拖 动 半径 滑 杆 按钮 查看 模糊 效 
果 ， 如 图 5-64 所 示 。 
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图 5-64 


本 章 对 UI 设计 中 的 按钮 进行 了 详细 、 有 具体 的 讲解 ， 阐 明了 按钮 在 UI 设计 中 的 地 位 和 重要 作 
用 , 介绍 了 按钮 设计 的 知识 和 规范 , 通过 一 组 播放 器 按钮 和 一 组 质感 按钮 的 绘制 , 详细 介绍 了 渐变 、 
阴影 、 内 阴影 、 模 糊 等 工具 在 设计 中 的 使 用 。 

本 章 有 2 个 综合 案例 、9 个 设计 案例 、2 个 操作 指南 、15 个 按钮 设计 ， 大 量 的 操作 讲解 、 
工具 使 用 和 设计 知识 ， 能 使 用 户 进一步 提高 Sketch 的 应 用 水 平 ， 并 对 按钮 设计 有 充分 的 认 知 和 
了 解 。 
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本 章 知识 点 
绘制 计 步 APP 男 面 儿 宣 
绘制 天 气 APP 界面 


“e000 Applidium 2 M127 A 





线 框图 可 以 勾勒 出 一 个 APP 界面 的 整体 架构 ， 对 一 个 界面 架构 施 以 色彩 和 样式 ， 即 可 完成 一 
个 APP 界面 的 整体 设计 ， 如 图 6-1 所 示 。 








移动 互联 网 之 路 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 


绘制 计 步 APP 界面 


APP 界面 .sketch 





SH 源 文件 , 源 文件 \ 计 步 
视频 视频 \ 应 用 案例 


案例 分 析 

本 案例 在 之 前 的 计 步 APP 
线 框图 的 基础 上 ， 完 成 APP 
计 步 界面 的 整体 设计 ， 其 中 涉 
及 布尔 运算 、 蒙 版 的 使 用 。 用 
户 综合 之 前 所 学 知识 ， 可 以 运 
用 多 种 工具 制作 出 精美 的 APP 
界面 。 


第 6 章 \6.1.1.mp4、6.1.2.mp4 


设计 分 析 

本 案例 最 主要 的 
是 对 形状 和 文字 添加 了 
色彩 ， 通 过 绘制 新 的 图 
标 对 主要 功能 的 标注 做 
了 替换 和 修改 ， 整 体 设 
计 遵循 运动 、 青 春 、 清 
新 的 风范 ， 给 人 以 心 旷 
神 怡 的 感觉 。 


本 案例 以 苹果 绿 作为 主 色 ， 灰 白 相间 
的 银色 和 海蓝 色 为 辅 色 ， 既 给 人 一 种 辽阔 、 
幽 远 的 感觉 ， 又 显得 光彩 夺目 ， 引 人 注目 。 


.1.1 绘制 计 步 APP 首页 计 步 显示 区 





















， 重 新 设置 存储 路 径 。 








01: 工具 栏 的 文件 名 和 修改 文件 名 称 为 “ 计 | 站 名 称 为 “ 计 步 背景 ”， 在 检查 器 中 设 秆 填充 模式 
| 为 线性 渐变 ,在 渐变 选项 卡 中 选择 一 种 蓝 色 渐变 。， 
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字 图 层 ， 在 检查 器 中 设置 
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+ 重新 设置 措 边 议 项 。 
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| 图 层 列表 页 面 面 板 右上 角 的 “+” | ” | 单 击 “插入 " 按钮 , 选择 “形状 一 椭圆 形 "选项 ，| 
.上 ] | 按钮, 添加 新 的 页 面 , 修改 页 面 名 称 为 “组 |] 日 按 住 【Shift ] 键 插 入 宽 和 高 均 为 35 的 正 圆 
件 样式 ”。 5 状 | 
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| Tl | ee es 图 层 。 


| 单 击 工具 栏 上 的 “旋转 ”按钮 ， 拖 动 鼠标 旋转 到 | 


| 状态 ， 拖 动 界定 框 调整 大 小 ， 并 将 Combined | 













合适 的 角度 ， 再 次 单 击 “ 旋 转 ” 按 钮 ， 退 出 旋转 ; 






图 层 移 动 到 合适 的 位 
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国民 的 寺 砚 和 边关， 在 填充 






ll 





| 单 击 工具 栏 上 的 “插入 "按钮 , 选择 “文本 ” 选项 ， 
插入 与 上 一 步 相同 填充 颜色 的 文字 ， 文字 大 小 
》 别 为 11 和 6， 将 文字 i 
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3 > 为 什么 界面 设计 大 多 喜欢 用 蓝 色 


蓝 色 在 界面 设计 中 是 一 种 常用 的 颜色 。 扫 一 眼 手 机 上 的 APP 图 标 ， 会 发 现 许多 APP 图 标 都 
是 包含 蓝 色 元 素 的 ， 如 知 乎 、 支 付 宝 、 饿 了 么 、 


》 1. 蓝 色 是 受众 度 最 高 的 颜色 


问卷 调查 显示 大 部 分 人 把 蓝 色 当 作 他 们 最 喜 


色彩 偏好 是 视觉 体验 中 的 重要 一 环 ， 如 图 6-2 所 示 。 





12306、 智 行 火车 票 等 。 


欢 的 颜色 。 因 此 , 蓝 色 被 认为 是 全 球 最 安全 的 颜色 ， 
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》 2. 蓝 色 与 大 自然 的 关联 度 最 高 
蓝 色 与 海水 、 晴 空 等 自然 景观 能 够 产生 强烈 的 关联 ， 这 增加 了 人 们 对 该 颜色 的 喜爱 ， 如 图 6-3 
所 示 。 

















》 3. 界面 设计 常用 颜色 
从 一 个 界面 设计 师 的 角度 来 看 ， 蓝 色 绝 对 是 一 种 有 用 的 颜色 。 红 色 、 栖 色 和 绿色 通常 都 是 有 
含义 的 ， 例 如 错误 、 警 示 和 完成 。 蓝 色相 对 来 说 就 成 为 非常 好 的 选择 ， 如 图 6-4 所 示 。 








了 》4. 科技 创新 感 
蓝 色 具有 科技 创新 感 ， 这 也 是 很 多 公司 使 用 这 种 颜色 的 原因 。 如 图 6-5 所 示 为 具有 创新 感 的 








图 6-4 





》 5. 安全 感 
在 旅游 网 站 上 ， 蓝 色 是 一 种 通用 的 色彩 ， 因 为 它 可 以 表达 可 以 依赖 的 感觉 ， 这 对 于 旅游 来 说 





是 件 好 事 ， 如 图 6-6 所 示 。 


》 6. 让 产品 看 起 来 更 加 可 信 
蓝 色 还 可 以 让 人 产生 信赖 感 。 很 多 如 Dell、IBM、Intel、AT&T 和 支付 宝 等 科技 公司 都 是 利 
用 蓝 色 来 传递 信誉 信息 ， 如 图 6-7 所 示 。 
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图 6-7 
及 7. 利于 色弱 的 人 查看 
很 多 种 色弱 患者 ( 如 最 常见 的 红 绿 色盲 ) 都 可 以 看 得 到 蓝 色 ， 这 一 点 上 蓝 色 明显 优 于 如 绿色 和 
红色 等 其 他 颜色 。 


6.1.2 ”绘制 计 步 APP 首页 其 他 部 分 


本 案例 主要 是 为 之 前 制作 的 线 框图 标注 功能 绘制 和 替换 图 标 ， 制 作 过 程 中 多 次 并 详细 使 用 组 
件 功能 。 用 户 通过 本 案例 的 学 习 ， 结 合 本 书 前 面 对 组 件 的 概括 和 介绍 ， 可 以 全 面 了 解 组 件 的 应 用 
































并 精通 组 件 的 




















栏 上 的 “创建 组 件 ” 











0 





的 对 话 框 中 输入 组 件 的 名 称 , 重 






















创建 新 的 组 件 - 


已 汪 中 的 回忆 妆 和 和 为 提 个 到 、 一 个 新 的 件 妆 寻 到 人 的 交 匀 让 - 
震 当 个 和 伯 兰 闪 时 信和 下 得 关 的 和 请 关 全 动 避 上 人- 









使 用 ， 并 进一步 了 解 图 标的 绘制 方法 。 




















层 一 替换 一 组 件 ”; 

































从 全 昨 晚 睡眠 


o 10 月 27 日 上 午 0 ! 






















端点 选 项 。 


的 描 边 颜色 和 措 边 粗细 使 用 矢量 
a 描 边 颜色 
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继续 使 用 矢量 工具 进行 给 





制 ， 设 置 与 上 一 步 











i 相同 的 描 边 颜色 和 描 边 粗细 。 










































为 组 件 命名 为 











“上 次 运动 ”, 单 击 “好 ”按钮 








选择 相关 图 层 ， 使 用 相同 的 方法 创建 组 件 ， 完成 创建 组 件 后 ， 左 侧 图 层 列表 中 出 现 新 介 
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使 用 相同 的 方法 ， 返 回 Page1 页 面 ， 将 相关 
层 蔡 换 成 组 件 。 









继续 插入 宽 和 高 均 为 35 的 正 圆 形状 ， 默认 填 
充 颜色 ， 描 边 颜色 Hex 值 为 F904B7。 








有 文本 排列 ”共享 插件 “显示 


窗口 ”帮助 
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将 所 选 拼合 为 位 图 
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消 勾 站 








































选择 白色 线段 和 心 形 形 状 并 右 击 ， 在 弹出 的 
快捷 菜单 中 选择 “ 蒙 版 ”选项 。 

















| 创建 蒙 版 后 ， 使 用 相同 的 方法 创建 组 件 并 重 
上 命名 为 [9 心率 ” 


i 
i 
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和 为 二 后， 一 人 二 共 全 的 的 中 。 
Eee 


























































上 次 运动 
的 ai 年 1 月 4 下 生 05: 34 0.33 公 时 


| 13'48"， 4 分 名 4 分 名 
: 也 严 Ut 步 数 


: @ i o0 67 次 分 
@ BE 36 123.9 斤 











| 单 击 工具 栏 上 的 “插入 ”按钮 ， 选择“ 形状 | 
星 形 ”选项 ， 在 检查 器 中 设置 参数 。 取 
选 选 “ 填 充 ” 复 选 框 。 pr edo 
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取消 勾 














钮 。 





创建 新 的 组 件 , 
已 选中 的 图 展 将 被 替换 为 单个 图 展 。 一 个 新 的 维 件 将 创建 到 你 的 文档 中 。 
每 当 这 个 组 件 被 编辑 的 时 候 ， 和 它 相关 的 图 履 将 自动 同步 修改 。 


状态 未 选 


回 发 送 组 件 到 “Symbols" 页 面 Li | 








三 ”会 阅 埠 乌 
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op 














= SO2A 





|: 计 >” 创 建 路 径 文本 
了 了》 视频: 视频 \ 操作 指南 \ 创建 路 径 文本 .mp4 





新 建 Sketch 空白 文档 , 单 击 工具 栏 上 的 “插入 ”按钮 , 在 弹出 的 菜单 中 选择 “形状 一 椭圆 
选项 ,如 图 6-8 所 示 。 在 画布 中 按 住 鼠 标 左 键 并 拖 动 ,绘制 任意 颜色 和 描 边 的 椭 




















圆 形 ,如 图 




















形 » 
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6-9 所 示 。 
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[CT 
图 回忆 四 二 以 
2 2 Ee 
Se "| i | = | 
下 这 
国 mass vu 
中 廊 四 
二 枉 会 sz ”aa 
Lm s| A=ns > 
图 os arwmiai+ > 和 
x# > Wa 
图 6-8 图 6-9 
在 工具 栏 上 单 击 “插入 ”按钮 , 选择 “文本 ”选项 , 在 画布 中 单 击 插入 默认 文字 , 如 图 6-10 


所 示 。 执 行 “文本 一 路 径 文字 ”命令 ， 如 图 6-11 所 示 。 








排列 共享 
修改 字体 -3T 


基体 $6 








让 % 
下 刘 线 %U 
增 大 字号 开 器 = 
减 由 字号 习 吕 ~ 














图 6-10 图 6-11 


拖 动 文本 框 到 矢量 图 形 上 ， 如 图 6-12 所 示 。 拖 动 文本 框 可 以 移动 文本 在 路 径 上 的 位 置 ， 
如 图 6-13 所 示 。 


人 6 DS i 
a "> a 
图 6-12 图 6-13 


选择 文字 图 层 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “变换 一 垂直 翻转 ”选项 ， 如 图 6-14 所 示 ， 
可 以 改变 文本 沿路 径 排列 的 方向 , 如 图 6-15 所 示 。 拖 动 文字 图 层 改变 位 置 , 方向 不 变 , 如 图 6-16 所 示 。 


创建 组 件 
锁定 图 层 


ER ca 了 
3; 罗 ( 。) 


















转化 为 轮廓 
图 6-14 图 6-15 图 6-16 


文本 转化 为 轮廓 


在 某 些 特殊 情况 下 ， 需 要 将 文本 转化 为 矢量 图 形 。 例 如 ， 要 制作 特殊 形状 的 艺术 字 时 ， 选 中 
需要 转化 的 文本 ， 执 行 “图 层 一 转化 为 轮廓 ”命令 ,如 图 6-17 所 示 ， 即 可 将 文本 转化 为 轮廓 。 
用 户 可 以 通过 编辑 路 径 和 锚 点 ， 得 到 特殊 艺术 字 效 果 ， 如 图 6-18 所 示 。 
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重要 共享 昱 区 “TS 

















图 6-17 图 6-18 


天 气 APP 在 生活 中 极为 常见 和 常用 。 每 一 个 手机 制作 商都 会 自 带 具有 特色 的 天 气 APP， 程 
序 应 用 商店 中 的 天 气 APP 更 是 五 花 八 门 、 层 出 不 穷 。 下 面 通 过 制作 天 气 APP 界面 向 用 户 展 示 天 
气 APP 的 绘制 方法 和 流程 ， 如 图 6-19 所 示 。 
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4 Tem | 加 : :<- vonn 天 气 讯 
国 回 ,~… 合用 拓 认 天 气 到 全 
图 6-19 

绘制 天 气 APP 界面 

源 文件 ， 源 文件 \ 天气 APP 界面 .sketch 

视频 : 视频 \ 应 用 案例 \ 第 6 章 \6.2.1.mp4、6.2.2.mp4 
案例 分 析 设计 分 析 色彩 分 析 

本 案例 在 天 气 APP 本 案例 通过 绘制 。 主 色 : 

线 框图 的 基础 上 完成 天 气 一 个 插画 背景 作为 天 气 | 
APP 界面 整体 设计 ， 在 设 APP 首页 的 底 图 ， 并 。 车 色 . 
计 过 程 中 使 用 了 旋转 图 片 ” ”使 用 点 和 线 绘制 了 温度 
和 设置 混合 选项 的 方法 ， 表 ， 使 整 组 界面 拥有 7 [| | | 
对 图 层 组 的 创建 与 编辑 已 。 ”设计 感 和 韵律 感 ， 文 字 运用 明媚 而 绚丽 的 天 蓝 色 和 沉静 山 远 的 
经 不 再 是 重点 ， 但 在 设计 。” 处 理 也 是 有 主 次 之 分 ，。。 宝蓝 色 ， 使 得 整个 画面 动静 赃 宜 ， 明 黄色 、 
过 程 中 时 刻 被 应 用 。 突出 重点 ， 一 目 了 然 。 叶 绿 色 和 海洋 绿色 的 点 缀 不 仅 增添 了 轻松 愉 


快 的 信息 ， 也 多 了 几 分 沉静 之 感 。 
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本 案例 主要 是 绘制 a 办 

















面 的 插画 部 分 ， 通 过 对 图 形 的 复制 、 旋 转 、 缩 放 等 编辑 ， 结 合 
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APP 界面 ”， 














修改 文件 名 称 为 “天 气 
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粗细 为 3、 描 边 颜色 Hex 值 为 306BAF 
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捕 |@@ 宇 气 良 52 、 
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图 层 顺 序 ， 绘 制 多 条 描 边 ; 
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复制 大 树 9 图 展 ，j 用 相同 的 方法 ， 复 制 并 合并 相关 图 层 ， 选 

并 全 并 形状 ， 单 击 工具 栏 上 的 “旋转 "” 按 | 反 图 层 后 右 击 ， 在 弱 出 的 快捷 菜单 中 选择 “ 复 

.| 乌 ， 拖 动 定 界 框 进行 旋转 。 在 编辑 器 中 设置 |] 日” 制 ” 选项 。 | 
”| 混合 模式 和 不 适 明 度 ， 填 充 方式 为 Hex 值 。 
























































i 3D9FE5 至 36383B 的 线性 渐变 。 
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9 图 层 ， 旋 转 到 合 








天 的 





| 式 " 选项 。 




































































无 的 形状 ， 蔡 换 之 前 的 正 圆 形 





161@ 


移动 互联 网 之 路 一 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 











"ll Sketch 仿 
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a 19% 
晴 | 党 空气 良 52 > 




















iOS 应 用 界面 设计 规范 
苹果 官方 认为 ， 所 有 的 iOS 程序 设计 都 应 该 包含 以 下 3 个 关键 点 ， 遵从 、 清 晰 和 深度 。 天 气 
APP 是 这 一 原则 应 用 的 典范 ， 如 图 6-20 所 示 。 


1 全 








图 6-20 


》 1. 遵从 要 求 

界面 能 够 帮助 用 户 理解 内 容 并 与 用 户 进行 互动 ， 但 却 不 会 分 散 用 户 对 内 容 的 注意 力 ， 在 该 界 
面 上 ， 底 部 的 按钮 和 界面 本 身 融 为 一 体 ， 既 能 清晰 地 显示 出 按钮 ， 又 不 会 分 散 用 户 对 界面 中 内 容 
的 注意 力 。 

》 2. 清晰 要 求 

无 论 字 体 设置 为 多 大 尺寸 ， 都 必须 便于 阅读 ， 界 面 中 的 图 标 醒目 上 且 无 多 余 的 修饰 ， 很 好 地 突 
出 了 功能 重点 的 同时 又 传达 了 正确 的 设计 理念 。 在 该 界面 上 ， 通 过 文字 的 大 小 对 比 及 清晰 明了 的 
天 气 图 标 ， 让 用 户 很 清晰 地 看 到 各 部 分 文字 显示 的 内 容 。 

》 3. 深度 要 求 

视觉 层次 和 生动 的 交互 操作 赋予 了 UI 生命 力 ， 不 仅 能 够 帮助 用 户 更 好 地 理解 UI， 还 能 让 用 
户 在 使 用 过 程 中 感到 惊喜 。 





由 :于 旋转 复制 
Sketch 除了 可 以 完成 图 形 旋转 的 操作 外 ， 还 可 以 实现 旋转 复制 的 操作 效果 。“ 旋 转 复制 ” 工 
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具 没有 出 现在 默认 的 工具 栏 中 ,用 户 可 以 通过 自 定义 工具 栏 ,将 其 添加 到 工具 栏 上 ,如 图 6-21 所 示 。 






































也 可 以 执行 “图 层 - 路 径 一 旋转 复制 ”命令 ， 如 图 6-22 所 示 。 














0 呈 次 
区 城 相交 导入 生 盆 放 转 复制 上 移 -~ 层 下 敬一 层 Mb 
国 会 廊 国 














:5 上 |; 计 > 使 用 旋转 复制 工具 


了》 视频 : 视频 \ 操作 指南 \ 使 用 旋转 复制 工具 .mp4 














将 所 选 拼合 为 位 图 








图 6-22 


新 建 Sketch 空白 文档 , 单 击 工具 栏 上 的 “插入 ”按钮 , 选择 “形状 一 星 形 ”选项 , 如 图 6-23 
所 示 。 人 在 画布 中 插入 星 形 ， 取 消 勾 选 “ 描 边 ” 复 选 框 ， 在 选项 卡 中 选择 一 种 填充 颜色 ， 如 图 6-24 





所 示 。 














图 6-23 


IOZE3 在 工具 栏 上 单 击 “ 旋 转 复制 ”按钮 ， 或 执行 “图 层 一 路 径 一 旋转 复制 ”命令 ， 在 弹出 
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ma Ex 固 oo 
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用 加 口中 四 


下 抬 色 器 





= 国 
9013FE 144 19 254 100 
Hex R 6 B A 
™ 全 局 颜色 








图 6-24 





bt 的 “ 旋 


转 复制 ”对 话 框 中 输入 数值 ， 如 图 6-25 所 示 。 单 击 “ 好 ”按钮 ， 旋 转 复制 效果 如 图 6-26 所 示 。 





旋转 复制 
国 嫉 一 个 二 创建 多 个 选中 项 的 副本 . 
副本 数量 : [zo ) vou wn rave 2 ayers intotar. 














图 6-26 
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[GEEO 旋转 复制 图 形 控制 杆 上 有 个 控制 点 ,以 空心 圆 显示 , 拖 动 控制 点 可 以 打开 复制 出 的 图 形 的 距离 ， 
效果 如 图 6-27 所 示 。 拖 动 控制 点 到 其 他 位 置 ， 可 以 得 到 更 丰富 的 旋转 复制 效果 ， 如 图 6-28 所 示 。 
























































图 6-27 图 6-28 


6.2.2 绘制 天 气 APP 其 他 界面 内 容 


本 案例 通过 绘制 一 组 天 气 图 标 和 提示 图 标 丰富 了 整个 天 气 APP 界面 的 内 容 ， 使 一 个 简单 的 天 
气 APP 更 具 人 性 化 ， 其 中 图 标的 点 缀 至 关 重 要 ， 在 设计 过 程 中 使 用 了 旋转 复制 功能 ， 使 用 户 了 解 
了 更 为 便捷 与 神奇 的 会 制 方法 。 








频 色 为 黑色 ， 措 边 六 
层 -路 径 -旋转 复制 " 
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i 口 正常 六 i 变换 > 

: EE 汪 合 不 如 明朗 | EE 上 

| 合并 形状 > 

: 描 边 全 十 | 图 片 » 

i i 画板 > 

i 9 mm ET ls ||: 蒙 板 六 

mm | 约束 bp 

! 用 及 加 |: 将 所 选 拼合 为 位 图 

i 内 才 让 转化 为 轮 该 ”分 0 
高 斯 模 精 人 中 





























一 个 辆 角 矩 形 和 两 个 正 国 形 ， 
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国 缠 一 个 点 创建 多 个 壬 中 项 的 加 本 
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设置 云 末 形状 的 填充 颜色 Hex 值 为 9B9B9B。 
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单 击 接 困 。 
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区间 个 昌 芭 。 一 个 的 人 人 的 人 
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加 各 入 到 “Symbols* 页 而 
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复制 “ 晴 转 阴 ”组 件 , 右 a 





从 组 件 分 离 ”按钮 


[| 各 的 对话 民 中 输入 组 件 的 名 称 , 单 击 * 好 " 













创建 果 的 组 作 、 


Fr Ll et Pe 
各 过 个 地 扩 放 坟 的 时 纺 ， 区 它 关 活 司 六 | 
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日 | 良 


加 发送 组 件 到 "symbols" 页 四 


np 





避 大 国 阴 转 晴 | 优 


1® 









































使 用 相同 的 方法 绘制 图 标 ， 选 择 相关 
创建 新 的 组 件 。 


中 的 图 层 将 补 鱼 换 为 单个 图 尾 。 一 个 新 的 崩 件 将 创建 到 你 的 文档 中 大 


已 于 
每 当 这 个 给 件 梳 编 辑 的 时 途 ， 和 它 相 关 的 图 属 将 自动 同步 修改 , 


加 发 送 组 件 到 "Symbols” 页 面 


































标 ， 创 建 “ 添 加 城市 ”组 件 。 











eee hh Peon Pe tpi 
每 当 这 个 所 件 被 加 的 时 候 ， 如 它 相 关 的 亚 导 将 自动 同 沙 人 





创建 新 的 组 件 。 


已 选中 的 图 层 将 被 恰 换 为 单个 图 届 。 一 个 新 的 组 件 将 创建 到 你 的 文档 中 。 
者 当 这 个 组 件 被 编辑 的 时 候 ， 和 它 相关 的 图 展 将 自动 同步 修改 。 


设置 列表 
加 发 送 组 件 到 “Symbols" 页 面 
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国 : 级 “ 国 3 级 ” 国 2 级 。 国 2 级 国 2 
wma ED ED ES ES Ey 
14:00 现在 : : 
修改 相关 形状 ， 设 置 线段 的 描 边 颜色 或 填充 
颜色 的 Hex 值 为 09ABE5。 _ 





































创建 新 的 组 件 。 
已 选中 的 图 层 将 被 替换 为 单个 图 层 。 一 个 新 的 组 件 将 创建 到 你 的 文档 中 , 
每 当 这 个 组 件 被 编辑 的 时 候 ， 和 它 相关 的 国民 将 自动 同步 修改 。 


18C 
Tc 16C T7C 
回 发 送 组 件 到 “Symbols” 页 面 RH EE 







, | 
| | 
入 3 级 。 入 3 级 入 3 级 入 2 级 入 2 级 ”入 2 级 


到 
[ss 
现在 























14:00 16:00 17:00 18:00 18:23 









































| 使 用 形状 工具 和 矢量 工具 绘制 风衣 图 标 并 创 ; 


| 使 用 形状 工具 和 文本 工具 绘制 国标 并 创建 “ 紫 
:5 建 “适宜 风衣 ”组 件 ， 设 置 填充 问 色 的 Hex :I6: 


i 外 线 较 强 ”组 件 ， 设 置 填充 颜色 的 Hex 值 为 | 
i F8E71C。 











创建 新 的 组 件 ， 


已 沁 中 的 图 技术 区 析 为 单个 国 层 。 一 个 新 的 组 件 折 创 建 到 你 的 廊 信 中 
乱 当 这 个 组 件 入 六 浊 的 时 候 ， 和 它 相关 的 图 展 浊 运 同 具 人 改 ， 








: 创建 新 的 组 件 。 
i 已 透 中 的 将 袜 次 个 图 层 。 一 个 莽 的 弧 件 持 全 建 到 你 的 府中 














大 当 这 个 绝 件 被 编辑 的 时 修 ， 和 已 相关 的 转 层 将 自动 司 步 修改 ， 条 外 线 较 强 

i | a la 

5: | 一 一 加 发 送 组 件 到 “Symbols ”页面 取消 | am | 
上 和 站 风 让 | 

: 回 发送 组 件 到 “Symbols" 页 面 Li 3 | 





:一 获 外 经 
”做 好 防 明 ， 


si 


适宜 风衣 


清 青 晨 的 ) 京 意 需 


所 吕 萧瑟 哦 ! 





























































:1] 外 运动 ”组 件 ， 设 置 填充 颇 色 的 Hex 信 为 旧 ;本 内 容 。 
07B11A。 
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创建 新 的 组 件 。 


已 省 的 图 屋 将 术 答 娄 为 单个 加 层 。 一 个 新 的 级 件 才 创建 到 你 的 六 档 中 - 
条 当 这 个 经 件 被 坟 注 的 时 候 ， 和 它 痊 关 的 医 层 交 边 同上 修改- 


回 发 送 组 件 到 “Symbols" 页面 取消 
























图 标 并 创建 “定位 ”组 件 ， 
| 设置 填充 颜色 的 Hex 值 为 09ABE5。 

















双击 组 件 ， 进 入 编辑 状态 ， 在 检查 器 中 人 
: 改组 件 内 相关 元 素 的 参数 ， 单 击 Return to | ! 
nstance 按钮 返回 | 

















电 

















已 寺中 榴 图 届 本 福 流 为 他 个 国 展 ， 一 个 基 的 组件 拓 创 建 到 你 的 六 档 中 。 
和 当 这 个 业 伯 直 妈 的 时 仿 ， 和 世人 关 的 匡 夺 入 各 凤 癌 赵 效 、 





[a ] 
回 发 送 组 件 到 "Symbols" 页 面 m 消 。 























在 “搜索 页 ”画板 中 将 相关 形状 替换 为 相 
组 件 ， 修 改 其 他 形状 的 填充 颜色 ， 设 置 填充 | | 
颜色 的 Hex 值 为 09ABE5。 
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二 了 分 > 移动 界面 中 文字 的 使 用 技巧 

文字 是 移动 界面 设计 中 重要 的 元 素 之 一 ， 文 字 的 设计 直接 影响 界面 整体 的 好 坏 。 文 字 的 设计 
要 从 字号 、 行 高 、 样 式 、 颜 色 和 字体 5 个 角度 来 考虑 。 

在 设计 UI 时 ， 通 常会 使 用 系统 默认 的 字体 。 例 如 ， 在 iOS 系统 中 ， 通 常会 采用 苹 方 字体 ， 
如 图 6-29 所 示 。 可 以 看 到 64pt 的 字体 看 起 来 比 14pt 的 字 要 粗 一 些 ， 感 觉 十 分 突 元 。 选 择 将 
64pt 和 48pt 的 文字 的 字 重 为 Light， 则 整体 效果 就 好 很 多 ， 如 图 6-30 所 示 。 


苹 方 字体 的 美 64pt 平方 字体 的 美 64pt 


苹 方 字体 的 美 48pt 苹 方 字体 的 美 48pt 
苹 方 字体 的 美 36pt 蔷 方 字体 的 美 36pt 
苹 方 字体 的 美 24pt 苹 方 字体 的 美 24pt 
苹 方 字体 的 美 20pt 苹 方 字体 的 美 20pt 
苹 方 字体 的 美 19pt 苹 方 字体 的 壬 18pt 
蔷 方 字体 的 美 14pt 莉 方 字体 的 美 Wpt 
图 6-29 图 6-30 


在 进行 UI 设计 时 ， 如 果 要 使 用 较 大 的 字体 ， 为 了 视觉 的 平衡 可 以 对 字 重 进行 调整 。 对 于 iOS 
系统 中 字体 的 设置 如 表 6-1 所 示 。 


表 6-1 
11~18 Regular 24~36 Thin 
18~24 Light 36 尼 NE UltraLight 
在 Material Design 设计 时 ， 对 文字 也 有 严格 的 要 求 ， 详 细 设置 如 表 6-2 所 示 。 此 处 单位 sp 
与 pt 具有 相同 的 含义 。 


表 6-2 
12=16 Regular 24~56 Regular 
20 Medium XE Light 


在 进行 UI 设计 时 ， 不 管 是 在 iOS 平台 还 是 Android 平台 ， 都 允许 用 户 使 用 自 定义 字体 。 自 
定义 字体 或 许可 以 吸引 眼球 ， 但 过 于 花哨 的 字体 反而 会 喧 宾 夺 主 ， 破 坏 界面 的 整体 美观 。 所 以 ， 
即便 是 选择 自 定义 字体 , 也 要 选择 大 众 容易 接受 的 字体 。 当 然 , 使 用 系统 默认 字体 是 最 安全 的 方法 。 


| 一 般 情况 下 ， 文 字 颜 色 和 背景 颜色 应 用 有 较 高 的 对 比 度 ， 以 方便 用 户 浏览 
阅读 。 同 时 应 避免 使 用 纯 黑色 文字 ， 应 该 使 用 不 同 层次 的 灰色 来 增加 界面 
的 层次 ， 便 于 区 分 。 


站 丐 起 仿 3 APP 界面 配色 原则 
手机 APP 界面 要 给 人 简洁 整齐 、 条 理 清晰 之 感 ， 依 靠 的 就 是 界面 元 素 的 排版 和 间距 设计 ， 还 
有 色彩 的 合理 、 舒 适度 搭配 。 总 体 而 言 ， 配 色 应 遵循 以 下 4 条 原则 ,分别 是 色调 的 统一 、 有 重点 色 、 
色彩 平衡 和 对 立 色调 和 。 
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了 1. 色调 的 统一 

针对 软件 类 型 及 用 户 工 作 环境 选择 恰当 的 色调 ， 例 如 绿色 体现 环保 ， 紫 色 代 表 浪 漫 ， 蓝 色 代 
表 时 尚 等 。 淡 色 系 让 人 感到 舒适 ， 暗 色 为 背景 可 以 让 人 不 觉得 累 。 总 体 而 言 ， 需 要 保证 整体 色调 
的 协调 统一 ， 重 点 突出 ， 使 作品 更 加 专业 和 美观 ， 如 图 6-31 所 示 。 


》 2. 有 重点 色 








EUROBET 














图 6-31 图 6-32 





在 选择 重点 色 时 ， 应 该 选择 与 整体 色调 协调 但 对 比 强烈 的 颜色 ， 重 点 色 的 
面积 要 小 ， 这 样 才 会 显得 更 加 突出 和 引 人 注 意 ， 另 外 选择 重点 色 必须 考虑 
配色 方面 的 平衡 效果 。 





》3. 色彩 平衡 

整个 界面 的 色彩 尽量 少 使 用 类 别 不 同 的 颜 
色 ， 以 免 让 人 眼花 综 乱 ， 反 而 会 让 整个 界面 出 
现 混杂 感 , 界面 需要 保持 干净 , 如 图 6-33 所 示 。 

办 4. 对立 色 调和 

对 立 色调 和 的 原则 很 简单 ， 就 是 浅 色 背景 
使 用 深 色 文 字 ， 深 色 背 景 上 使 用 浅 色 文字 。 例 
如 ， 蓝 色 文字 以 白色 背景 容易 识别 ， 红 色 背 
景 则 不 易 分 辨 原因 是 红色 和 蓝 色 没有 足够 
反差 , 但 蓝 色 和 和 白色 反差 很 大 。 除非 特殊 场合 ， 
杜绝 使 用 对 比 强 烈 、 让 人 产生 民 恶 感 的 颜色 ， 
如 图 6-34 所 示 。 
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2 山 :创建 和 编辑 组 件 


组 件 也 是 由 多 个 图 层 组 成 的 ， 各 图 层 也 会 显示 在 图 层 
列表 中 ， 这 让 组 件 看 上 去 像 一 个 组 ， 但 是 组 件 同 时 又 会 被 
放 在 一 个 单独 的 页 面 中 。 


了》1. 创建 组 件 

选择 一 个 组 、 一 个 图 层 或 者 同时 选中 几 个 图 层 ， 执 行 
“图 层 一 创建 组 件 ” 命 令 ， 或 单 击 工具 栏 中 的 “创建 组 件 ” 
按钮 ， 如 图 6-35 所 示 ， 在 弹出 的 “创建 新 的 组 件 ” 对 话 
框 中 输入 组 件 名 称 ， 单 击 “好 ”按钮 ， 即 可 创建 组 件 ， 如 
图 6-36 所 示 。 图 6-34 














Tven 
创建 条 的 组 件 。 
Ge 上 

















.Welcome! 


.WelcomelL 
图 6-35 图 6-36 


有 2. 修改 组 件 内 容 和 管理 组 件 

创建 组 件 后 , Sketch 会 自动 地 创建 一 个 组 件 页 面 , 用 来 保存 所 有 的 组 件 内 容 , 如 图 6-37 所 示 ， 
按 【Enter ] 键 ， 双 击 工作 区 的 组 件 或 单 击 图 层 列表 中 的 “组 件 ” 画 板 ， 进 入 组 件 页 面 ， 可 对 组 件 
进行 编辑 。 对 组 件 进行 编辑 后 ， 单 击 Return to Instance 按钮 ， 可 以 返回 原 操作 页 面 ， 如 图 6-38 
所 示 。 











页 面 十 
rr | Te 
组 件 Welcome! 
| 
页 面 1 加 | | | 
[Dy Rectangle 


IWelcome!l 
图 6-37 图 6-38 

》 3. 使 用 组 件 编辑 器 

组 件 虽然 是 用 户 通过 操作 创建 的 ， 不 是 Sketch 中 默认 的 原 有 工具 ， 却 拥有 自己 的 检查 器 。 选 
择 某 个 组 件 ， 可 以 看 到 右 侧 的 检查 器 列表 ， 在 “覆盖 ”选项 下 面 的 文本 框 中 输入 文本 ， 可 以 修改 


组 件 中 的 文本 内 容 ， 如 图 6-39 所 示 。 也 可 以 打开 样式 列表 ， 在 列表 中 选择 其 他 组 件 替换 形状 或 
其 他 内 容 ， 如 图 6-40 所 示 。 
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》 4. 复制 组 件 
与 图 层 和 图 层 组 相同 , 在 图 层 列表 中 选择 要 复制 的 组 件 右 击 , 在 弹出 的 快捷 菜单 中 选择 “复制 ” 
选项 ， 即 可 复制 该 组 件 。 




















图 6-39 图 6-40 
复制 组 件 后 ， 进 入 “组 件 ” 页 面 修改 组 件 内 容 ， 如 图 6-41 所 示 。 返 回 操作 面板 后 ， 会 发 现 
之 前 被 复制 的 组 件 也 发 生 了 改变 。 这 是 因为 组 件 是 用 来 对 相关 元 素 进行 重复 使 用 的 ， 所 以 复制 的 
组 件 属性 不 变 ， 与 被 复制 的 组 件 有 样式 相同 的 关联 性 ， 如 图 6-42 所 示 。 


十 页 型 十 























Welcome! Welcome! 
图 6-41 图 6-42 





》5. 从 组 件 分 离 

综 上 所 述 ， 如 果 要 复制 的 组 件 与 之 前 被 复制 的 组 件 脱离 这 种 关联 性 ， 需 要 对 组 件 的 属性 进行 
重新 定义 ， 这 种 目的 可 以 通过 先 分 离 组 件 、 再 重新 创建 组 件 的 方法 来 实现 。 

选择 复制 的 组 件 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “从 组 件 分 离 ”选项 ， 则 之 前 的 组 件 会 变 成 
一 个 图 层 组 ， 如 图 6-43 所 示 。 选 择 该 图 层 组 ， 单 击 工具 栏 上 的 “创建 组 件 ” 按 钮 ， 即 可 重新 创 
建 组 件 ， 如 图 6-44 所 示 。 














Welcome! Welcome!, Welcome! Welcomel!| 
图 6-43 图 6-44 
创新 创建 组 件 后 ， 进 入 组 件 页 面 ， 可 以 看 到 页 面 中 已 经 有 新 定义 的 组 件 ， 如 图 6-45 所 示 ， 此 时 
修改 组 件 的 内 容 ， 再 返回 当前 操作 页 面 ， 可 以 看 到 两 个 组 件 之 间 已 经 不 再 相互 影响 , 如 图 6-46 所 示 。 























图 6-45 图 6-46 
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操作 指南 自 定 义 和 使 用 文本 样式 
3 视频 : 视频 \ 操 作 指南 \ 自 定义 和 使 用 文本 样式 .mp4 


[ONE 新 建 Sketch 空白 文档 ， 单 击 工具 栏 上 的 “插入 ”按钮 ， 选 择 “ 文 本 ”选项 ， 在 画布 中 单 
击 输入 文字 。 如 图 6-47 所 示 ， 为 文字 图 层 设置 Hex 值 为 065EA4 至 05ACF4 的 线性 渐变 ， 如 
图 6-48 所 示 。 
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to0% 入 安放 的 到 
图 osmrnmat » sty | © | 
wx > Wr 
图 6-47 图 6-48 


[OZE3 义 选 “阴影 ” 复 选 框 ， 设 置 参数 ， 如 图 6-49 所 示 。 勾 选 “ 内 阴影 ” 复 选 框 ， 设 置 参数 ， 
如 图 6-50 所 示 。 
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[GOSE2 勺 选 “ 描 边 ” 复 选 框 ， 选 择 使 用 线性 渐变 填充 方式 ， 设 置 参 数 ， 如 图 6-51 所 示 。 执 行 “图 
层 一 创建 共享 样式 ”命令 ， 如 图 6-52 所 示 。 




















将 所 选 拼合 为 位 图 
转化 为 轮 廊 。 分 %O 















style. 


图 6-51 图 6-52 
[了 单 击 “ 样 式 ”选项 ， 打 开 样 式 列 表 ， 如 图 6-53 所 示 。 重 新 输入 文字 ， 在 样式 列表 中 单 击 
该 样式 ， 可 直接 应 用 该 样式 ， 如 图 6-54 所 示 。 

















VY 没有 文本 样式 























样式 


本 章 以 前 面 2 个 线 框图 为 基础 ， 在 实际 操作 中 讲述 了 APP 界面 设计 ， 通 过 修改 颜色 、 样 式 、 
文本 等 参数 ， 完 成 APP 界面 设计 的 制作 。 本 章 共 有 2 个 综合 案例 、4 个 应 用 案例 和 3 个 操作 指南 ， 
讲述 了 样式 的 创建 和 应 用 、 使 用 旋转 复制 命令 快速 绘制 图 标 、 创 建 和 使 用 文本 路 径 、 插 入 形状 、 
插入 文本 、 创 建 图 层 组 、 创 建 和 编辑 组 件 等 基础 操作 ， 通 过 创建 蒙 版、 图 层 脱离 蒙 版 、 复 制 形状 、 
调整 渐变 方向 和 角度 等 方法 , 使 读者 进一步 掌握 界面 设计 的 构成 、 界 面 中 色彩 的 运用 、 插画 的 绘制 ， 
以 及 如 何 加 强 图 标的 复杂 性 、 多 样 性 , 使 用 户 能 够 绘制 出 更 精美 漂亮 的 图 标 , 完成 完整 的 界面 制作 。 
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第 7 冀 Wy 5 : ~ 设计 制作 PC 端 支付 网 页 入 这 
~ 设计 制作 家 居 网 站 页 面 





一 些 用 户 认 为 网 页 手机 端 就 是 PC 端的 移植 ， 无 须 重新 设计 ， 只 需 照搬 PC 端的 功能 即 可 。 
这 是 一 种 严重 的 误解 。PC 端 网 页 和 移动 端 网 页 由 于 输出 端的 不 同 ， 有 着 很 大 的 不 同 。 例 如 ， 屏 幕 
尺寸 、 操 作 方法 、 网 络 环境 、 传 感 器 、 使 用 场景 、 软 件 迭 代 速 度 、 续 航 和 使 用 时 间 等 方面 。 下 面 
通过 制作 一 个 PC 端 支付 网 页 ， 让 用 户 可 以 了 解 网 页 的 制作 规范 和 特点 ， 如 图 7-1 所 示 。 
a a @ ee ©® ® 
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,|、 和 ”设计 制作 PC 端 支付 网 页 
实战 于 源 文 件 : 源 文件 \PC 端 支付 网 页 .sketch 
视频 : 视频 \ 应 用 案例 \ 第 7 章 \7.1.1.mp4、7.1.2.mp4 









案例 分 析 设计 分 析 

本 案例 为 一 本 案例 对 页 面 
组 支付 页 面 ， 包 的 跳 转 细节 做 了 别 
括 购物 车 、 支 付 ” 致 的 处 理 ， 整 体 使 
信息 、 送 货 信息 用 极 简 设计 风格 ， 
和 支付 完成 4 个 对 重点 项 目 和 需要 
页 面 ， 是 一 组 扁 突出 的 按钮 做 了 强 
平 化 和 极 简 风格 。”” 调 ， 信 息 架 构 明 本 案例 使 用 色彩 较 轻 ， 色 彩 协调 且 风 格 一 致 ， 对 比 
的 网 页 设计 ， 结 确 ， 便 于 浏览 使” ” 色 和 调整 色 新 潮 而 富有 奢华 感 ， 深 亚麻 色 和 沙砾 色 的 搭 
构 清晰 ， 整 体 总 整个 支付 过 程 一 目 配给 人 感觉 熏 和、 含蓄 且 有 和 舒适 感 ， 使 用 具有 高 贵 气质 
局 简洁 大 气 。 Te 的 江 户 紫 作为 点 缀 ， 能 够 促进 人 们 的 关注 和 购买 欲 。 





过 生 :时 网 页 设计 PC 端 和 移动 端的 区 别 


》 1. 屏幕 尺寸 不 同 

随 着 技术 的 日 益 成 熟 ， 移 动 端 设 备 的 屏幕 越 做 越 大 ， 但 是 与 PC 端的 计算 机 屏幕 相 比 还 是 差 
一 些 。 通 常 PC 端 屏幕 比较 大 ， 所 以 浏览 的 视觉 范围 更 广 一 些 ， 可 设计 性 更 强 。 而 且 由 于 页 面 内 
容 较 多 ， 所 以 页 面 中 的 一 些小 错误 也 不 易 被 发 现 ， 如 图 7-2 所 示 。 

移动 端 设备 的 屏幕 就 小 很 多 , 操作 局 限 性 很 大 。 由 于 空间 较 小 , 所 以 在 设计 上 可 发 挥 之 处 不 多 。 


》 2. 操作 方式 不 同 

PC 端的 操作 方式 与 移动 端的 操作 方式 有 着 明显 的 差别 ，PC 端 主要 使 用 鼠标 操作 ， 通 常 包括 
滚动 、 单 击 、 右 击 、 双 击 、 拖 动 等 操作 ， 操 作 相对 来 说 比较 简单 ， 交 互 效果 也 比较 少 。 

而 手机 端的 操作 方式 就 复杂 多 了 , 包含 手指 点 击 、 滑 动 、 双击 、 双 指 放大 、 双 指 缩小 .五 指 收缩 ， 
以 及 3D Touch 按压 力度 等 。 除 了 手指 操作 外 ， 还 包括 配合 传感器 完成 的 摇 一 摇 。 陀 旋 仪 感应 灯 
操作 方式 ， 如 图 7-3 所 示 。 这 些 丰富 的 操作 方式 ， 也 搭配 着 很 多 新 颖 的 交互 方式 。 

















图 7-2 图 7-3 


》 3. 网 络 环境 不 同 
不 管 是 移动 端 还 是 PC 端 都 离 不 开 网 络 。PC 端 设备 网 络 连 接 通 常 比较 稳定 ， 而 移动 端 设备 则 
可 能 遇 到 信号 不 稳 或 网 络 环境 不 佳 ， 出 现 网 速 慢 甚 至 断 网 的 情况 。 产 品 经 理 在 网 页 设计 中 要 充分 
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考虑 到 这 些 问题 ， 提 出 更 好 的 解决 方案 。 


》 4. 传感器 不 同 

移动 端 设备 完善 的 传感器 是 PC 端 设 备 不 具备 的 ， 例 如 压力 、 方 向 、 重 力 、GPS、NFC、 指 
纹 识别 、 虹 膜 识 别 、3D Touch 和 陀螺 仪 等 。 这 些 传感器 使 得 移动 端的 操作 干 变 万 化 ， 交 互 效果 
丰富 多 彩 。 在 设计 移动 端 网 页 中 可 以 巧妙 地 使 用 传感器 ， 让 产品 更 丰富 、 更 易 用 。 


》 5. 使 用 场景 和 使 用 时 间 的 不 同 

PC 端 设备 一 般 在 家 、 单 位 或 者 学 校 这 些 比 较 固定 的 场景 中 使 用 , 所 以 其 使 用 时 间 偏 于 持续 化 ， 
通常 是 在 一 段 特 定 的 时 间 段 内 持续 使 用 。 

而 移动 端 设备 则 不 受 任何 限制 ， 用 户 在 吃饭 、 坐 车 、 身 着 休息 时 都 可 以 使 用 ， 新 增 的 防水 功 
能 甚至 可 以 让 用 户 在 洗澡 或 游泳 时 使 用 移动 设备 。 移 动 端的 使 用 时 间 更 加 灵活 ， 在 时 间 上 更 加 碎 
片 化 ， 所 有 的 操作 更 倾向 于 短 时 间 内 完成 。 

》 6. 软件 迭代 时 间 和 更 新 频率 不 同 


PC 端的 软件 迭代 时 间 较 长 ， 用 户主 动 更 新 软件 的 频率 较 低 。 而 移动 端 恰恰 相反 ， 软 件 迭 代 的 
时 间 较 短 ， 用 户主 动 更 新 软件 的 频率 很 高 。 这 些 内 容 产 品 经 理 在 设计 网 站 时 都 需要 考虑 到 。 


》 7. 功能 设计 上 的 区 别 

考虑 以 上 的 诸多 因素 ， 移 动 端 页 面 设计 与 PC 端 页 面 设计 有 着 很 大 的 不 同 。 例 如 ，PC 端 经 党 
使 用 的 下 拉 菜 单 ， 在 移动 端 就 很 少 使 用 。 而 移动 端的 滑动 解锁 在 PC 端 也 是 没有 的 。 

当 用 户 在 页 面 中 输入 文字 时 ，PC 端 一 般 都 是 通过 文本 框 解决 ， 如 图 7-4 所 示 。 而 移动 端 由 于 
手机 屏幕 尺 十 和 界面 风格 的 原因 ， 通 常 采 用 另 起 一 页 或 者 文字 后 面 直接 输入 的 方法 ， 如 图 7-5 所 示 。 









































图 7-4 图 7-5 


7.1.1 绘制 PC 端 支付 网 页 购物 车 界面 











本 案例 使 用 面包 悄 路 径 样 式 绘制 导航 部 分 ， 面 包 悄 路 径 是 一 种 作为 辅助 和 补充 的 导航 方式 ， 能 
够 使 用 户 无 论 浏览 到 网 站 中 的 哪 一 个 层级 、 哪个 人 页面， 都 可 以 清楚 地 看 到 该 页 面 的 路 径 





























入 宽 和 高 均 为 38 的 正 
设置 正 国 形 状 的 填充 颜色 和 描 边 颜色 。 






























入 按钮 ， 选 择 “ 画 板 ” 选 项 ,插入 “桌面 
宽屏 ”画板 。 修 改 文件 名 称 并 设置 存储 路 径 : 
| 和 存储 样式 。 





me 
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插入 文本 ， 在 检查 器 中 设置 字体 颜色 为 白色 | 使 用 相同 的 方法 输入 其 他 文本 ， 在 检查 器 中 
上 5 “文字 大 小 为 20， 复 制 文本 并 移动 到 合 sist [5 | 设置 文本 参数 。 | 
置 ， 修 改 文本 内 容 ， 文 本 颅 色 设 置 为 黑色 。 








购物 车 














使 用 相同 的 方法 继续 插入 直线 和 文字 ， 直 线 将 图 片 “ 紫 水 晶 项 链 .jpg” 置 入 画布 中 ,插入 | 
[| 和 文字 的 填充 颜色 相同 ， 中 间 的 直线 描 边 粗 .日 完 和 高 为 110 的 算 形 形状 。 | 




































































形 作为 蒙 版 ”命令 。 
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使 用 相同 的 方法 将 “ 苗 强 耳坠 .jpg” 置 入 画 
布 中 , 插入 宽 和 高 为 110 的 矩形 并 创建 蒙 版 。 
插入 文本 ， 在 编辑 器 中 设置 文本 参数 。 





| 使 用 相同 的 方法 继续 插入 文本 ， 在 检查 器 中 
设置 文本 参数 。 | 
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| 插入 贺 角 和 矩形， 在 检查 器 中 设置 各 项 参数 ， 
设置 填充 颜色 为 白色 ， 设 置 描 边 颜色 Hex 
值 为 979797， 插 入 文本 ， 设 置 文本 大 小 为 
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| 四角 半径 为 25 5， 在 检查 路 中 设置 基色 ， 
| 描 边 颜色 默认 。 | 





| 括 入 帘 为 180` 高 50 的 圆 角 和 矩形， 设置 


| 入 文本 ， 
相同 ， 将 相关 

















i 插入 文本 ， 设置 文本 填充 颜色 Hex 值 为 
: 5700A3， 使 用 相同 的 方法 绘制 圆 角 矩形 并 插 : 
ee “优惠 券 减 免 ”| | 
图 层 编辑 并 重 命 
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二 宁 分 :时 扁平 化 设计 在 Ul 设计 中 的 应 用 二 
随 着 扁平 化 设计 风格 的 流行 ， 扁 平 化 网 站 界面 越 来 越 多 ,特别 | Ea 

是 许多 欧美 网 站 都 采用 扁平 化 设计 ， 页 面 设计 简单 大 方 ， 内 容 表 达 | 所， 


观 突出 ， 并 且 网 页 界面 具有 良好 的 用 户 体验 和 交互 性 。 ” 时 第 
网 站 界面 中 所 包含 的 元 素 有 很 多 种 ， 这 些 设计 元 素 也 是 通过 一 a ds 
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系列 的 风格 、 尺 寸 和 形状 等 属性 体现 的 ， 这 些 元 素 在 网 站 界面 设计 每 日 训 折 和 京东 本质 
中 都 有 各 自 不 同 的 用 途 。 如 果 设 计 者 使 用 恰当 且 设 计 新 颖 ， 每 一 种 和 
元 素 都 能 够 以 它们 独特 的 展现 方式 使 得 网 页 风格 焕然 一 新 。 . a ry 
》 1. 图 标 和 微 章 | 
图 标 在 网 页 中 占据 的 面积 很 小 , 不 会 阻碍 网 页 信息 的 宣传 。 另 外 ， es 6 oy 
设计 精美 的 图 标 还 可 以 为 网 页 增添 色彩 。 由 于 图 标本 身 具备 的 种 种 : 一 | 一 _ 
优势 ， 几 乎 每 一 个 网 站 的 界面 中 都 会 使 用 图 标 来 为 用 户 指 路 ， 从 而 全 | 雹 | 三 日 
大 大 提高 用 户 浏览 网 站 的 速度 和 效率 ， 也 极 大 地 提升 了 网 站 界面 的 
美观 程度 ， 如 图 7-6 所 示 。 图 7-6 
徽章 在 网 站 界面 设计 中 的 用 处 就 是 作为 装饰 品 来 吸引 用 户 的 注意 力 ， 并 且 传 达 某 些 重要 的 信 






























































息 ， 除 此 之 外 没有 其 他 的 作用 。 但 是 如 果 使 用 得 当 ， 也 很 有 可 能 会 获得 意 想 不 到 的 精彩 效果 ， 如 
图 
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图 7-7 





3》 2. 圆 角 和 折 角 

所 谓 的 圆 角 设计 ， 是 指 将 要 插入 网 页 中 的 图 片 或 其 他 元 素 以 圆 角 的 形式 在 网 页 中 展现 ， 从 而 
达到 一 种 圆润 、 平 滑 的 效果 ， 这 种 方法 可 以 使 得 浏览 者 在 浏览 该 网 站 时 在 视觉 体验 上 有 一 种 舒适 、 
平静 的 感觉 ， 而 不 会 有 特别 锐利 的 视觉 效果 。 
圆 角 在 网 页 中 的 使 用 并 不 能 够 随心 所 欲 地 大 量 使 用 ， 只 有 当 圆 角 和 网 页 的 整体 视觉 风格 相 匹 
配 时 ， 这 样 的 使 用 才 是 合理 的 。 另 外 ， 将 多 个 圆 角 构图 联合 起 来 使 用 ， 还 可 以 在 视觉 效果 上 增强 
设计 的 总 体 性 ， 如 图 7-8 所 示 。 
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折 角 能 够 让 网 页 或 者 网 页 中 的 元 素 以 类 似 纸张 边 角 折 起 、 卷 起 等 效果 显示 , 非常 具有 文化 气息 ， 
它 将 网 页 与 印刷 的 形式 相 联系 ， 让 浏览 者 对 其 有 一 种 信任 感 ， 并 且 更 容易 接受 网 站 界面 上 所 传达 
的 信息 。 

折 角 的 网 页 展现 形式 大 多 适用 于 一 些 文化 艺术 类 网 站 ， 因 为 这 种 结构 形式 的 网 站 界面 很 容易 让 
人 联想 到 纸张 ， 从 而 与 网 站 的 主题 内 容 遥 相 呼应 ， 能 够 丰富 网 站 的 内 容 和 整体 结构 ， 如 图 7-9 所 示 。 








》 3. 标签 和 条 纹 

标签 元 素 在 网 站 界面 设计 中 并 不 是 经 常用 到 ， 但 是 实质 上 ， 标 签 和 图 标 、 折 角 等 设计 元 素 的 
用 途 都 差不多 ， 只 不 过 它 没有 其 他 元 素 张扬 的 风格 ， 它 只 会 以 一 种 巧妙 且 恰 到 好 处 的 方式 在 网 页 
中 出 现 ， 并 为 用 户 提供 网 站 的 相关 信息 。 

标签 在 网 站 界面 中 能 够 吸引 浏览 者 的 注意 力 ， 这 是 它 的 本 质 ， 尤 其 值得 注意 的 是 ， 当 我 们 需 
要 将 某 个 信息 展示 给 用 户 时 ， 只 需 在 标签 上 放置 一 个 标题 ， 就 可 以 达到 突出 该 部 分 信息 的 效果 ， 
用 户 若 想 浏览 该 信息 也 极为 方便 、 快 捷 ， 如 图 7-10 所 示 。 


hod er -加 





ET 
DO ss 








图 7-10 
条 纹 在 网 站 界面 设计 元 素 中 是 最 简单 的 也 是 相当 微小 的 一 部 分 ， 但 是 在 对 网 站 界面 进行 设计 
时 ， 还 是 经 常会 用 到 条 纹 这 一 元 素 的 。 
条 纹 没有 徽章 的 耀眼 ， 也 没有 图 标的 意义 深刻 ， 其 大 多 作为 背景 来 展示 ， 因 此 ， 其 在 网 站 界 
面 上 主要 是 以 细致 入 微 并 且 赏 心 悦 目 的 方式 来 提高 页 面 的 设计 水 准 ， 从 而 在 不 知 不 觉 中 对 网 站 进 
行 由 内 而 外 的 改变 和 提升 ， 如 图 7-11 所 示 。 
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4. 装饰 元 素 







































































装饰 元 素 在 网 站 界面 中 的 地 位 是 比较 重要 的 ， 大 多 数 网 站 都 需要 通过 各 种 精美 的 装饰 元 素来 
点 组 网 站 界面 ， 为 页 面 增加 看 点 ， 来 吸引 浏览 者 观看 ， 从 而 使 网 页 信息 能 够 得 到 充分 的 宣传 ， 如 
图 7-12 所 示 。 
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图 7-11 图 7- 







































































2 
装饰 背景 也 属于 装饰 元 素 。 如 今 使 用 装饰 模式 来 设计 网 页 界面 已 经 成 为 一 种 流行 趋势 。 如 果 
装饰 背景 在 网 页 界面 中 运用 得 当 ， 则 可 以 让 一 个 设计 变 得 时 尚 或 典雅 ， 如 图 7-13 所 示 。 


Ow 





生 攻 办 TY 意 英 夸 / 度 肤 





图 7-13 








人 们 几乎 每 天 都 会 接触 形形色色 的 表单 ， 然 而 填写 表单 的 过 程 往往 不 是 特别 愉悦 ， 需 要 花费 
时 间 输 入 信息 ， 点 击 提交 ， 可 能 还 需要 等 待 审核 ， 尤 其 是 磁 到 较为 复杂 、 流 程 长 的 表单 ， 如 果 交 
互 体验 较 差 ， 很 容易 让 人 产生 挫败 感 ， 在 中 途 选 择 放 弃 。 
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因此 ， 需 要 提高 用 户 填写 表单 的 效率 ， 表 单 结构 目标 清晰 、 有 效 组 织 表 单元 素 及 按 信息 内 容 
进行 分 组 分 页 是 提高 交互 效率 最 基本 的 方法 。 


制 “购物 车 ”画板 ， 修 改 复制 的 画板 名 插入 宽 为 250、 高 为 30 的 贺 角 矩形 ， 在 检查 | 
| 中 】 为 支付 信息 ”， 保 留 和 修改 有 用 图 层 ， 恶 [|] 口 器 中 义 选 “填充 ”* 阴 影 " 和 “内 阴影" 复 选 框 ， 








































填充 : Hex ( F8DEFD ) 


阴影: Hex ( Js | 
内 阴影 ; Hex (BD10E0) es | 


HIRE | 


Ea 























i 插入 宽 为 430、 高 为 260 的 圆 角 矩形， 在 检 : : 插入 和 矩形， 在 在 检查 器 中 设置 参数 。 继 续 插入 } 





i i i 


i 

i 

上 

上 

! 

i 

| ”| 查 器 中 设置 填充 和 描 边 参数 。 | 宽 为 60、 高 为 35、 贺 角 半 径 为 5 的 贺 角 
03 DH 乱 形 ， 设 置 其 壤 充 到 色 为 色 ， 描 边 颜色 为 | 
mk ”| Hex(979797)， 插 入 相同 颜色 的 文本 ， 文 本 ， 
| 大 小 分 别 为 14 和 15。 
- 

i 

! 

! 

| 

1 

! 
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上 
: 
: 
i 
! 
: 
: 
: 
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i 形 ， 填充 颜色 为 Hex(F3F3F3)， 莘 边 贞 色 为 
| Hex(BDBBBE)。 























入 宽 和 高 均 为 35 的 正 国 
i 设置 填充 颜色 ， 取 消 勾 选 “ 描 边 ” 复 选 框 ， : 
: 形状 ， 移 动 位 置 并 合并 形状 ， 插 入 i 
状 的 填充 颜色 相同 的 文本 。 
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3 PirgFang SC 

守重 Sempald :| 
| | 加 2 加 
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将 相关 图 层 编组 并 重 命名 ， 适 当 调整 各 
和 图 层 组 到 合适 的 位 置 。 oe 


使 用 相同 的 方法 插入 文本 ， 在 检查 器 中 设 
文本 参数 和 颜色 选项 。 













































插入 高 为 48 的 贺 角 矩形 ,设置 
， 继 续 ，] 癌 。 描 边 粗细 为 1， 复制 多 个 加 解答 形 并 调整 帘 度 ， 
插入 文字 ， 设 置 参数 。 














窗 : 376 。 窑 : 





241 坑 充 : Hex (F3F3F3) 。 描 边 : Hex ( BDBBBE) 



























插入 宽 和 高 均 为 17 的 正 圆 形 状 并 进行 复制 ， i 
i 设置 描 边 颜色 ， 描 边 粗细 为 1。 继续 插入 宽 和 
高 为 9 的 正 圆 形状 。 插入 文字 ， 在 检查 器 中 | 








描 边 : Hex ( 979797) 可 


| :二 全 
〇 普通 运输 


@) 加 急 st 
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的 填充 颜色 修改 





购物 车 


最 寄 详情 


运输 方式 


加 到 交付 信 息 





支付 信息 





送 策 信息 


$18.00 (6 天 内 ) 











乔 入 文字 ， 设 置 广 











se Gr 
民 日 -| 
na mn 















| ] | 均 为 100 的 正 加 形状 和 长 度 分 别 为 30 和 45 ;| 日。 图 层 创建 图 层 组 。 
| “| 的 直线 段 ， 设 置 直线 的 端点 样式 。 














祝贺 你 ! 
您 的 订单 已 被 接受 ! 














sa EN NR 


祝贺 你 ! 
您 的 订单 已 被 接受 ! 











混合 模式 


Sketch 中 的 “混合 ” 
对 象 的 颜色 混合 ， 得 到 更 多 更 丰富 的 页 面 效 果 。 
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与 Photoshop 等 软件 中 的 混合 








功能 相似 ， 都 是 为 了 将 对 象 颜色 与 底层 





拉 菜 单 。 
将 两 个 对 象 夫 加 在 一 起 ， 对 顶部 的 对 象 指定 混合 模式 ， 即 可 获得 不 同 的 混合 效果 ，16 
效果 如 图 7-14 所 示 。 


Sketch 为 用 户 提供 了 16 种 混合 模式 ， 选 择 检查 器 面板 中 的 “混合 ”选项 ， 弹 出 混合 模式 下 
种 


汝 会 
/ 比 串 








颜色 减 淡 








强 光 排除 重大 排除 





饱和 度 颜 
图 7-14 


[Ey 


明度 











网 页 不 仅 要 有 精美 的 视觉 效果 ， 还 要 包括 出 色 的 交互 设计 、 便 捷 流 畅 的 使 用 方式 ， 以 及 给 用 
户 一 种 安全 和 信任 感 ， 使 用 户 感到 亲切 。 一 个 好 的 网 站 除了 内 容 精 彩 、 定 位 准确 以 外 ， 还 要 方便 
用 户 浏览 ， 使 用 户 可 以 快速 地 在 网 站 中 找到 自己 感 兴趣 的 内 容 ， 如 图 7-15 所 示 。 
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200 万 家 庭 的 共同 选择 


庶 布 全 国 21 个 省 市 自治 区 186 家 直 营 分 支 机 构 


昌 光电 思 


二 A 和 





实战 


案例 分 析 设计 分 析 色彩 分 析 
本 案例 为 设计 和 制作 一 个 本 案例 使 用 

家 居 网 站 的 页 面 ， 涵 盖 了 混合 样 ”简约 的 扁平 设计 风 

式 和 位 图 的 编辑 ， 展 示 给 用 户 一 格 ， 整 体 结构 清晰 。 县 必 汪汪 全 全 生 且 2 靖江 人 

个 完整 、 精 美的 产品 网 页 的 设计 。 明确 ， 图 片 和 其 他 “” 辅 色 ， 

流程 和 整体 结构 。 通 过 本 案例 ， 元 素 的 使 用 倾向 于 

用 户 可 以 综合 运用 之 前 的 图 标 设 ” 规范 化 且 不 失灵 DUO 

计 、 结 构 插入 文本 、 插 入 形状 ， 活 ， 起 到 了 产品 展 紫色 调 具有 浪漫 气息 ， 以 明亮 的 绿色 和 深究 

以 及 文本 和 形状 的 编辑 等 最 常见 。 示 和 传达 网 站 信息 ”的 蓝 色 做 搭配 ， 增 添 了 些许 雅致， 具有 层次 感 和 

的 Sketch 工具 ， 设 计 制 作出 精 。 的 作用 。 动感 ， 使 画面 在 奢华 之 余 不 觉 沉 问 。 

美的 PC 端 网 页 界面 。 





3 人 编辑 位 图 
Sketch 提供 了 6 种 位 图 工具 ， 分 别 是 选区 、 魔 术 棒 、 反 向 选择 、 裁 剪 、 填 充 选 区 和 色彩 校正 。 
其 中 反 向 选择 、 裁 剪 和 填充 选区 工具 只 能 在 创建 完 选区 后 才能 使 用 。 
》1. 选区 
使 用 选区 工具 在 图 片上 拖 动 ， 即 可 创建 一 个 矩形 选择 区 域 ， 如 图 7-16 所 示 。 按 住 【 Shift 】 


键 的 同时 创建 选区 ， 可 以 实现 选区 的 相 加 操作 ， 如 图 7-17 所 示 。 按 下 【 Option 】 键 的 同时 可 以 
实现 选区 的 相 减 操作 ， 如 图 7-18 所 示 。 
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图 7-17 图 7-18 


》2. 魔术 棒 

选区 工具 只 能 创建 规则 的 选区 ， 而 使 用 魔术 棒 工 具 可 以 创建 不 规则 的 选区 。 在 图 片上 任意 位 
置 单 击 并 拖 动 , 即 可 创建 一 个 选区 , 拖 动 的 范围 越 大 , 容 差 就 会 越 大 , 如 图 7-19 所 示 。 配合 [ Shift 】 
键 和 【 Option 】 键 可 以 获得 更 加 精确 的 选区 ， 如 图 7-20 所 示 。 








图 7-19 图 7-20 


3》 3. 反 向 选择 
单 击 “ 反 向 选择 ”按钮 ， 当 前 未 被 选中 的 区 域 将 会 被 选中 ， 反 之 亦 然 ， 如 图 7-21 所 示 。 











图 7-21 


》4. 裁剪 
创建 选区 后 单 击 “裁剪 ”按钮 ， 将 减 去 选区 之 外 的 区 域 ， 如 图 7-22 所 示 。 
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》5. 填充 选区 
创建 选区 后 单 击 “填充 选区 ” 按钮, 将 为 选区 填充 特定 颜色 , 同时 出 现 拾 色 器 供用 户 选 择 颜 色 ， 
如 图 7-23 所 示 。 填 充 效果 如 图 7-24 所 示 。 
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~ 全 局 颜色 
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国 回 因 国 图 国 十 


上 文档 闫 色 














图 7-23 图 7-24 


》6. 色彩 校正 

如 果 用 户 希望 对 图 片 进行 简单 的 色彩 调整 ， 可 以 先 选中 图 形 ， 在 检查 器 面板 中 可 以 看 到 “ 颜 
色调 整 ”的 参数 ， 如 图 7-25 所 示 。 用 户 可 以 分 别 对 图 片 的 色相 、 饱 和 度 、 亮 度 和 对 比 度 进行 调整 。 
调整 色相 的 效果 如 图 7-26 所 示 。 









































已 
颜色 调整 
色相 一 -169 
饱和 度 | 
亮度 一 一 0 
对 比 度 | 1 
图 7-25 


7.2.1 绘制 PC 端 家 居 页 面 的 整体 结构 


本 案例 采用 结构 简单 、 视 觉 流程 清晰 、 便 于 用 户 快速 定位 的 一 栏 式 布局 方式 ， 采 用 了 布局 在 
网 页 顶部 的 导航 ， 图 片 排列 方式 使 用 大 小 不 一 的 矩形 展示 方式 ， 通 过 本 案例 用 户 可 以 了 解 常用 网 
页 的 一 般 表现 形式 。 



















改 文件 名 称 ， 设 置 存储 路 径 和 存储 样式 。 





区 
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通过 复制 和 调整 ， 得 到 宽 26、 高 28 和 宽 
i 22、 高 28 的 和 矩形， 分 别 修改 填充 颜色 为 
i Hex(1782B0) 和 Hex(7FCD08)， 并 将 两 种 ; 
系 加 到 颜色 选项 卡 中 。 





i 插入 宽 为 51 高 为 28 的 矩形 ,取消 勾 选 " 描 ; 
i 复 选 框 ， 设 置 填 充 颜色 为 Hex(88396A)， 
并 将 该 颜色 添加 到 颜色 选项 卡 中 。 




















CE 
7FCDO8 127 205 8 
Hex R 6 B 
全 局 颜色 
本 上 国 上 四 国 目 图 国 上 国 
国 国 国 国 图 国 


100 
A 



















[i | se 57 | 106 100 


Hex LL 
T 全 局 颜色 


























插入 宽 为 33、 
色 为 白色 
































’ 
J a 255 | |50 


Hex 8 A 



















se 在 检查 器 中 设置 文本 参 绘制 高 为 48、 贺 角 半 径 为 5 的 4 个 圆 角 矩形 ，| 
5 黑色 。 设置 不 同 的 宽度 ， 放 到 合适 的 位 置 ，4 个 贺 | 
角 矩 形 的 填充 颜色 为 Hex(F3F3F3)， 描 边 颜 ; 
色 为 Hex(BDBBBE)。 | 
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或 美 品 家 居 攻 
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i 插入 文字 ， 在 检查 器 中 设置 文本 参数 ， 使 用 
i 相同 的 方法 插入 其 他 文字 ， 设 置 其 他 文字 图 
: 层 的 不 透明 度 为 50%。 
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| 设置 文本 参数 。 





























| 使 用 相同 的 方法 继续 插入 文本 ， 在 检查 器 中 













































001.jpg” 拖 入 画布 中 。 





J 开 “ 布艺 家 居 照片 文件 夹 ， 将 “布艺 ， 
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】 | 插入 宽 为 1140、 高 为 67 的 矩形 ， 在 检查 器 | ，。 | 插入 宽 和 高 均 为 11 的 正 区 
| || | 的 闫 色 选 项 卡 中 选择 填充 颜色 。 : 旧 : 

























































E23 对 > 理解 以 用 户 为 中 心 


以 用 户 为 中 心 的 原则 实际 上 就 是 要 求 设计 者 要 时 刻 站 在 浏览 者 的 角度 来 考虑 ， 主 要 体现 在 以 
下 几 个 方面 。 


》1. 使 用 者 优先 观念 

无 论 什么 时 候 ， 不 管 是 在 着 手 准备 设计 网 站 界面 之 前 、 正 在 设计 之 中 ， 还 是 已 经 设计 完毕 ， 
都 应 该 有 一 个 最 高 行动 准则 ， 就 是 使 用 者 优先 。 使 用 者 想 要 什么 ， 设 计 者 就 要 去 做 什么 。 如 果 没 
有 浏览 者 光顾 ， 再 好 看 的 网 站 界面 都 是 没有 意义 的 。 

》 2. 考虑 用 户 浏览 器 

如 果 想 让 所 有 的 用 户 都 可 以 毫 无 障碍 地 浏览 页 面 ， 那 么 最 好 使 用 所 有 浏览 器 都 可 以 阅读 的 格 
式 ， 不 要 使 用 只 有 部 分 浏览 器 可 以 支持 的 HTML 格式 或 程序 技巧 。 如 果 想 展现 自己 的 高 超 技术 ， 
又 不 想 放弃 一 些 潜在 的 观众 , 可 以 考虑 在 主页 中 设置 几 种 不 同 的 浏览 模式 选项 ( 例如 , 纯 文 字模 式 、 
Frame 模式 、Java 模式 等 )， 供 浏览 者 自行 选择 。 

》 3. 考虑 用 户 的 网 络 连接 

浏览 者 可 能 使 用 ADSL , 或 高 速 专线 , 或 小 区 光纤 。 所 以 , 在 进行 网 页 设计 时 必须 考虑 这 种 状况 ， 
不 要 放置 一 些 文件 量 很 大 ， 下 载 时 间 很 长 的 内 容 。 网 站 界面 设计 制作 完成 之 后 ， 最 好 能 够 亲自 
测试 。 


















































E23 寺 > 界面 设计 中 的 内 容 与 形势 统一 


任何 设计 都 有 一 定 的 内 容 和 形式 。 设 计 的 内 容 是 指 它 的 主题 、 形 象 、 题 材 等 要 素 的 总 和 ， 形 
式 就 是 它 的 结构 、 风 格 设计 语言 等 表现 方式 。 一 个 优秀 的 设计 必定 是 形式 对 内 容 的 完美 表现 。 

一 方面 ， 网 站 界面 设计 所 追求 的 形式 美 必须 适合 主题 的 需要 ， 这 是 网 站 界面 设计 的 前 提 。 只 
追求 花哨 的 表现 形式 及 过 于 强调 “独特 的 设计 风格 ”而 脱离 内 容 ， 或 者 只 求 内 容 而 缺乏 艺术 的 表 
见 ， 网 站 界面 设计 都 会 变 得 空洞 无 力 。 设计 师 只 有 将 这 两 者 有 机 地 统一 起 来 , 深入 领会 主题 的 精髓 ， 
再 融合 自己 的 思想 感情 ， 找 到 一 个 完美 的 表现 形式 ， 才 能 体现 出 网 站 界面 设计 独 具 的 分 量 和 特有 
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的 价值 ; 另 一 方面 ， 要 确保 网 页 上 的 每 一 个 元 素 都 有 存在 的 必要 性 ， 不 要 为 了 炫耀 而 使 用 元 余 的 
技术 ， 那 样 得 到 的 效果 可 能 会 适得其反 。 只 有 通过 认真 设计 和 充分 的 考虑 来 实现 全 面 的 功能 并 体 
现 美感 ， 才 能 实现 形式 与 内 容 的 统一 ， 如 图 7-27 所 示 。 


我 9 manam < 


























图 7-27 
网 站 界面 具有 多 屏 、 分 页 、 谋 套 等 特性 ， 设 计 师 可 以 对 其 进行 形式 上 的 适当 变化 以 达到 多 变 
的 处 理 效 果 ， 丰 富 整个 网 站 界面 的 形式 美 。 这 就 要 求 设 计 师 在 注意 单个 页 面 形式 与 内 容 统一 的 同 
十 也 不 能 忽视 同一 主题 下 多 个 分 页 面 组 成 的 整体 网 站 的 形式 与 整体 内 容 的 统一 , 如 图 7-28 所 示 。 
因此 ， 在 网 页 设计 中 必须 注意 形式 与 内 容 的 高 度 统一 。 


mm 























图 7-28 


7.2.2 绘制 PC 端 家 居 网 页 广告 部 分 

网 站 已 经 成 为 企业 形象 和 产品 宣传 的 重要 方式 之 一 ， 而 广告 则 是 大 多 数 网 站 页 面 中 不 可 或 缺 
的 元 素 ， 除 了 为 广告 安排 一 个 合适 的 位 置 之 外 ， 最 基本 的 要 求 就 是 广告 的 设计 需要 符合 网 站 的 整 
人 泛 锡 二 扰 用 户 的 视线 ; 更 要 注意 避免 喧 宾 夺 主 。 


插入 文字 ， 在 检查 器 中 设置 文本 参数 ， 设置 吧 
内 阴影 参数 。 













































继续 插入 文字 ，7 在 闫 色 选 项 卡 中 选择 黑色 作 
为 文本 十 讽 颜色 。 
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200 万 家 庭 的 共同 选择 ” 


筷 布 全 国 21 个 省 市 自治 区 186 家 直 营 分 支 机 构 a : 
























































的 正 圆 形 状 , 勾 选 
设置 相应 参 才 





































































插入 宽 为 30、 高 为 4 自 
i 左上 角 和 右 下 角 的 加 角 半径 为 3。 然 后 插入 j 
i 宽 为 4、 高 为 8 的 和 矩形， 将 
置 进行 连接 。 
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继续 插入 文本 ， 在 画布 中 输入 文字 ， 在 检查 
器 中 设置 文本 参数 








高 为 23、 
和 矩形 ,将 相关 图 层 


















































































重 入 正 圆 形状 ， 修改 上 下 两 个 顶点 为 直角 ， 


| | 选择 颜色 选项 卡 中 之 前 添加 的 绿色 ， 取 消 勾 
选 “ 描 边 ” 复 选 杠 。 
19@ 
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专注 装修 27 年 





























Desktop HD 


DD om4 四 | 
OD owls 昌 


An 公司 简介 | 产品 介绍 |. 
O owl2copy10 




















|_ | 执行 “图 层 一 路 径 一 旋转 复制 ”命令 ， 在 插入 正 加 形状， 删除 和 移动 锚 点 得 到 下 面 的 
,|] 习 “出 的 对 话 框 中 输入 复制 数量 为 25， 拖 动 中 心 | 吓 形状 ， 在 颜色 选项 卡 中 选择 填充 颜色 。 





[Be ve ee: 


He RAR G B A 
下 主 后 肥 色 i 
四 
国 国 回国 国 国 # 








” ”通过 复制 、 调 整 大 小 和 布尔 运算 得 到 下 状 图 层 合 并 ， 调 整 复制 
，]5 的 效果 ， 在 检查 器 的 颜色 选项 卡 中 选择 填 | 日 ”形状 的 大 小 和 位 置 。 | 
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os 
[es]s zs | : eg ~ : 


yy 














插入 文字 ， 设 置 与 之 前 相同 的 文本 大 小 和 






















































重 入 宽 和 高 均 为 85 的 正 圆 形 状 ， 设 置 描 边 ; 
细 为 3， 在 选项 卡 中 选择 描 边 的 渐变 颜色 。 
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245 166 35 100 
Hex 覆 间 全 






























“图 层 -合并 形状 一 分 离 ” 命令， 将 通过 
制 得 到 的 各 图 层 分 离 成 单个 的 形状 。 

















行 “ 图 展 -路 径 一 旋转 复制 ”命令 ， 设 


副本 参数 为 6， 单 击 “ 好 ”按钮 ， 拖 动 中 1 
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同时 选中 所 有 形状 ， 在 “填充 ”面板 的 混合 
模式 列表 中 选择 “正片 亚 底 ”选项 。 






保持 第 一 个 形状 的 填充 颜色 不 变 ， 依 次 改 好 
其 他 形状 的 填充 颜色 。 












BD10EO、 9013FE、4A90E2 
50E3C2、6DD1F5、7FCD08 

































插入 矩形 ， 单 击 工具 栏 上 的 “变换 ”按钮 手 | 
动 定 界 框 调整 角度 ， 取消 勾 选 “ 描 边 ” 复 污 杠 | | 
| 选择 渐变 选项 卡 中 的 第 1 个 渐变 选项 作为 填充 ，| | 
| 复制 形状 ， 移 动 到 合适 位 置 并 修改 渐变 方向 。 | 


| 复制 正 圆 形状 ， 修改 描 边 渐变 为 渐变 选项 
5 中 的 第 1 个 选项 。 
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Em 吴 


Nex R 6G B A 
全 局 渐变 


国 + 
















复制 4 个 绿色 线性 渐变 形状 ， 并 移动 到 合适 | 
日 的 位 置 ， 同 时 选中 这 些 形状 ， 在 混合 模式 列 | 
表 中 选择 “正片 鸽 底 ”选项 。 | 





了 了] | 类 移 动 到 全 适 的 位 置 ， 修 改 渐变 方向 ， 调 
图 层 顺序 。 








i 
i 
i 
i 
: 
i 
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为 相关 
图 层 组 的 位 置 。 
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没有 文本 样式 
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6 
时 
人 


复式 空间 领跑 者 
莹 版 


Sketch 中 的 蒙 版 可 以 让 用 户 有 选择 地 显示 图 层 中 局 部 。 例 如 ， 在 一 个 图 片上 创建 圆 形 蒙 版 ， 
片 只 会 显示 圆 形 的 效果 ， 如 图 7-29 所 示 。 


月 全 


图 7-29 
在 Sketch 中 ， 所 有 图 形 都 可 以 变 成 蒙 版 。 选 择 图 形 ， 执 行 “ 图 层 一 用 所 选 图 形 作为 蒙 版 ” 
命令 , 如 图 7-30 所 示 。 所 有 这 个 蒙 版 上 面 的 图 形 都 会 被 剪 切 成 蒙 版 的 内 容 显 示 出 来 ,如 图 7-31 
所 示 。 
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哆 | 



































页 面 1~ 口 


人 8O + 赎 pic 


使 用 图 形 蒙 版 ~^%M 
蒙 版 模式 





将 所 选 拼合 为 位 图 
转化 为 轮廓 














导出 图 层 
图 7-30 图 7-31 








》 1. 限制 蒙 版 

有 时 用 户 不 希望 所 有 的 图 层 都 被 蒙 版 剪 切 ， 那 么 可 以 将 蒙 版 和 想 要 剪 切 的 图 层 单独 编组 ， 组 

外 的 图 层 就 不 会 被 蒙 版 剪 切 了 ， 如 图 7-32 所 示 。 
在 无 法 编组 的 情况 下 , 用 户 可 以 选中 一 个 想 要 释放 的 图 层 , 执行 “图 层 一 忽略 底层 蒙 版 ”命令 ， 

如 图 7-33 所 示 。 这 一 层 和 它 以 上 的 所 有 图 层 都 不 会 被 蒙 版 剪 切 。 需 要 注意 的 是 ， 调 整 图 层 顺序 

时 需要 格外 小 心 ， 个 别 图 层 可 能 会 意外 地 被 蒙 版 剪 切 ， 如 图 7-34 所 示 。 









































































































































四 
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将 所 选 拼合 为 位 图 页 面 1 v 各 
0 Rectangle 

: 
+ 图 pic 
) oval 























图 7-32 图 7-33 图 7-34 





》 2. 图 形 蒙 版 

用 户 可 以 同时 选中 一 个 图 形 和 一 张 图 片 ， 单 击 工具 栏 上 的 “ 蒙 版 ”按钮 或 者 执行 “图 层 一 
用 所 选 图 形 作为 蒙 版 ”命令 ， 如 图 7-35 所 示 ， 就 可 以 直接 将 这 个 图 形 作为 选中 图 形 的 蒙 版 了 。 
Sketch 会 将 它们 自动 编组 ， 并 将 图 形 图 层 变 成 蒙 版 ， 如 图 7-36 所 示 。 

















































































将 所 选 拼合 为 位 图 


页 面 1 ~ 






转化 为 轮 遍 0%0 
使 用 图 形 蒙 版 ~^%M 
蒙 版 模式 > 





用 所 选 图 形 做 为 蒙 版 














图 7-35 图 7-36 


》3. Alpha 蒙 版 
通常 情况 下 , 一 个 蒙 版 会 显示 所 在 区 域 的 内 容 , 而 隐藏 其 他 地 方 。 Alpha 蒙 版 是 一 种 渐变 蒙 版 ， 
通过 为 蒙 版 图 形 设置 黑白 的 渐变 填充 实现 效果 。 
[三 二 1 人 > 使 用 蒙 版 并 设置 蒙 版 不 透明 度 
》 视频 \ 操 作 指 南 \ 使 用 蒙 版 并 设置 蒙 版 不 透明 度 .mp4 


[WE 新 建 Sketch 空白 文档 ， 将 素材 图 片 拖 入 画布 中 ， 效 果 如 图 7-37 所 示 。 使 用 椭圆 工具 在 
页 面 中 创建 一 个 如 图 7-38 所 示 的 正 圆 形状 。 
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GE 添加 “ 蒙 版 ”选项 到 工具 栏 中 ， 同 时 选中 两 个 


网 











层 ， 单 击 “ 蒙 版 ”按钮 ， 如 图 7-39 所 示 。 















































在 “图 层 ” 面 板 中 选择 形状 图 层 ， 如 图 7-40 所 示 。 

















图 7-39 四 图 7-40 
执行 “图 层 一 蒙 版 一 蒙 版 模式 一 透明 度 蒙 版 ”命令 ， 如 图 7-41 所 示 。 在 检查 器 面板 上 设 
置 填充 颜色 为 线性 渐变 ， 在 渐变 选项 中 选择 黑色 到 不 透明 度 为 0 的 渐变 选项 。 调 整 渐变 方向 ， 蒙 
版 效果 如 图 7-42 所 示 。 
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图 7-41 图 7-42 
上 二 本 全 网 站 常见 设计 风格 


》1. 超 清晰 

如 果 只 能 选择 一 种 方法 来 设计 网 
站 ， 超 清晰 风格 是 首选 ， 超 清晰 不 仅 
仅 代表 一 种 风格 ， 也 是 设计 清晰 实用 
网 页 的 理想 方式 。 超 清晰 网 站 偏向 于 
极 简 主 义 风格 ， 但 其 更 被 关注 的 是 做 
到 清晰 明了 ， 而 非 越 少 越 好 ， 这 种 设 
计 是 视觉 享受 与 简单 实用 的 完美 统一 。 
总 之 ， 超 清晰 追求 的 是 功能 完备 但 不 
失 优雅 的 完美 目标 , 如 图 7-43 所 示 。 

》2. 极 简 

极 简 风 格 一 直 很 流行 ， 历 来 都 是 
很 受 欢迎 的 一 种 网 站 设计 风格 。 这 种 
风格 不 但 能 够 提供 最 实用 的 设计 ， 而 
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永远 都 不 会 过 时 。 以 这 种 风格 设计 的 网 站 也 非常 易于 创建 和 维护 ， 丸 

















0 图 7-44 所 示 。 因 为 设 


























计 和 实现 极 简 风 格 不 是 一 件 容易 的 事情 ， 极 简 风 格 需要 在 细节 上 下 功夫 ， 在 微妙 之 处 独 具 慧 眼 。 

















图 7-44 


》3. 照片 
使 用 照片 作为 网 站 


























站 更 加 具有 条 理性 ， 如 











-45 所 示 。 














图 7-45 








背景 ? 听 起 来 好 像 是 十 几 年 前 互联 网 刚 兴 起 时 的 做 法 。 但 如 果 看 到 处 理 得 
好 的 网 站 ， 你 就 不 会 这 么 想 了 ， 这 些 照片 作为 主要 元 素 的 网 站 都 让 人 耳目 一 新 ， 它 们 比 常见 的 网 
图 7 




















干 万 不 要 低估 了 照片 在 网 页 中 所 能 取得 的 效果 ， 同 时 要 牢记 一 点 : 越 有 效果 的 东西 ， 使 用 起 














来 就 越 要 小 心 。 照 片 风 格 可 能 生动 、 有 冲击 力 、 含 义 丰富 ， 但 如 果 使 用 得 不 恰当 ， 也 可 能 会 使 整 























个 网 站 页 面 的 表现 效果 相当 糟糕 。 
》 4. 插画 























作为 一 名 设计 师 ， 画 插画 绝对 是 信 手 拓 来 的 事 。 也 许 插画 风格 最 明显 的 优势 就 是 在 设计 中 增 











添 一 些 新 颖 、 独 特 的 元 素 。 在 这 个 注意 力 持续 时 间 几 乎 为 零 的 数字 世界 
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P， 任 何 突 册 


的 东西 都 能 
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够 引 人 注 目 ， 如 图 7-46 所 示 。 
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》5. 三 维 
互联 网 更 像 是 平面 和 静态 的 ， 这 就 使 那些 具有 空间 感 的 网 站 看 起 来 与 众 不 同 。 为 设计 的 某 些 方 
面 添加 一 些 立 体感 , 就 能 够 很 好 地 强化 网 页 的 总 体 视觉 感受 , 并 能 够 提供 空间 开阔 的 感觉 , 如 图 7-47 


所 示 。 



























































角色 属性 





图 7-47 
在 网 页 设计 中 可 以 通过 一 些 简单 的 技术 和 视觉 技巧 体现 出 三 维 立 体感 。 一 种 常用 的 技巧 就 是 


















































将 元 素 重 晋 放置， 如 果 众多 元 素 中 的 某 一 个 是 实际 物体 的 图 像 ， 这 种 方式 尤其 适合 ， 通 过 让 图 像 
与 页 面 设计 相 重 晋 ， 就 形成 了 立体 感 ， 另 一 种 简单 的 技术 是 使 用 阴影 ， 靠 近 物 体 的 阴影 会 让 物体 
有 立体 感 ， 因 此 会 带 来 一 种 空间 感 。 如 果 阴 影 看 起 来 像 从 物体 上 延伸 下 来 的 ， 那 就 更 有 效果 了 。 


》 6. 以 字体 为 主 
以 字体 为 主 的 这 种 设计 风格 可 以 归 类 为 极 简 主义 风格 ， 这 两 种 风格 的 细微 差别 是 ， 以 字体 为 
主 的 风格 更 加 关注 以 优雅 的 方式 来 使 用 字体 。 以 字体 为 主 风格 的 网 页 能 够 表现 出 字形 的 自然 美 ， 
并 传达 出 网 站 的 主要 信息 。 如 图 7-48 所 示 ， 如 果 使 用 这 种 风格 ， 特 大 号 的 字体 会 成 为 整个 页 
的 焦点 ， 所 以 一 定 要 表现 出 重要 信息 。 
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图 7-48 


随 着 移动 互联 网 的 广泛 应 用 ， 在 网 站 中 运用 纯色 风格 十 分 流行 。 也 就 是 说 ， 许 多 设计 师 不 再 


使 用 图 片 或 装 


器 ， 转 而 采用 更 基本 的 方式 并 大 量 利 用 纯色 。 


虽然 这 种 风格 名 为 “纯色 ”， 但 并 不 意味 着 完全 只 使 用 一 种 颜色 ， 应 该 把 思路 放 开 ， 不 要 拘 
泥 于 形式 。 另 外 ， 使 用 纯色 设计 的 网 站 能 够 真正 实现 快速 加 载 。 


3》 8. 扁平 化 


设计 页 面 时 ， 去 除 多 余 烦 琐 的 装饰 效果 ， 只 使 用 最 简单 的 色 块 布局 。 使 用 更 少 的 按钮 和 选项 ， 使 


整个 页 








百 











本 章 结合 前 面 章 节 中 讲解 的 内 容 ， 使 用 Sketch 中 的 各 种 工具 完成 PC 端 网 页 的 制作 ， 讲 解 了 
设计 PC 端 网 页 的 方法 、PC 端 和 移动 端 网 页 设计 的 区 别 、 扁 平 化 设计 在 UI 设计 中 的 应 用 和 网 站 
常见 设计 风格 等 内 容 ， 对 使 用 Sketch 进行 UI 设计 是 一 个 概括 。 


本 章 通过 2 个 综合 案例 和 4 个 应 用 案例 ， 从 结构 、 图 标 、 文 字 和 颜色 搭配 等 


更 加 干净 整齐 ， 既 便于 用 户 操作 ， 又 可 将 想 要 表达 的 内 容 直接 表达 出 来 , 这 就 是 扁平 化 设计 。 








要 环节 入 手 ， 


贯穿 两 种 网 页 的 制作 流程 和 细节 。 通 过 学 习 本 章 内 容 ， 用 户 可 以 设计 制作 出 高 端 、 典 雅 的 网 页 。 
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前 面 章节 中 讲述 了 Sketch 的 使 用 方法 和 UI 设计 的 理论 知识 ， 用 
户 可 以 通 i 前 面 的 内 容 完成 绘制 线 框 图 、 按 钮 、 图 标 、 移 动 端 和 
PC 端 界 乍 ， 并 了 解 UI 设计 的 基础 理论 知识 和 精髓 ， 最 终 的 设 
计 都 以 输出 互 作为 终极 目标 。 本 章 将 对 Sketch 的 输出 和 一 些 交 
互 知识 进行 讲解 ， 帮 助 读者 完成 使 用 Sketch 进行 UI 设计 的 最 后 一 个 
环节 。 
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最 新 版 的 Sketch47.1 中 的 新 功能 包括 一 项 很 方便 的 操作 , 即 无 须 建立 切片 而 直接 导出 
切片 预 设 ”中 已 经 罗列 了 常用 的 导出 参数 ， 用 户 也 可 以 添加 新 的 预 设 和 设置 导出 参数 。 

















导出 APP 应 用 图 标 


源 文件 : 无 
视频 : 视频 \ 应 用 案例 \ 第 8 章 \8.1. mp4 


适 配 多 分 辩 率 移动 界面 














随 着 移动 设备 的 发 展 ， 品 种 越 来 越 丰富 。 一 套 界 面 已 经 无 法 满足 
所 有 的 设备 了 ， 做 好 多 分 辩 率 的 适 配 就 尤为 重要 。 
》1. 适 配 Android 设备 
目前 市 面 上 在 售 的 安 卓 设备 有 2000 多 种 ， 要 做 到 适 配 所 有 的 设备 
似 是 不 可 能 的 。 但 是 ， 虽 然 安 卓 设备 众多 ， 但 大 部 分 的 屏幕 的 长 宽 
比 是 16 : 9。 在 Sketch 的 画板 预 设 中 ，Material Design 可 以 理解 
为 安 卓 的 画板 ， 如 图 8-1 所 示 。 






























































避 氏 天 ”sketch 导出 位 图 时 ， 如 果 高 分 辩 率 位 图 压缩 
Bus 为 低 分 辨 率 ， 图 片 的 清晰 度 要 高 于 低 分 辩 率 往 
高 分 辨 率 拉 伸 。 
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计 导出 移动 端 APP 界面 


MY” 为 网 页 划分 切片 
WY 导出 点 九 切 图 

















四 
去 ， 以 








YT Material Design 


Mobile Portrait 


Mobile Landscape 640x36 
Tablet 7” Portrait 上 


Tablet 7” Landsc. 960x 


Tablet 9” Portrait 


Tablet 9" Lands… 


Desktop Portrait 850x1280px 


Desktop Landsc. 1280x850px 
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画板 的 基本 尺寸 为 360 x 540， 该 分 辩 率 的 2 倍 是 720 x 1280，3 倍 是 1080 x 1920。 当 在 
设计 安排 设备 界面 时 ， 通 常 指 需要 用 360 x 540 的 尺寸 进行 设计 。 然 后 到 处 3 倍 尺寸 即 可 。 在 不 
同 分 辩 率 上 程序 会 自动 压缩 。 

》2. 适 配 iOS 设备 

iOS 设备 相 比 Android 设备 就 少 多 了 ，iPhone 4/4s 的 宽 和 iPhone 5/5c/5s 一 致 ， 而 


iPhone 5/5c/5s、iPhone 6 及 iPhone 6 Plus 的 长 度 比 一 致 。 用 户 可 以 iPhone 6 为 基准 进行 设 
计 ， 然 后 根据 iPhone 5 及 iPhone 6 Plus 分 别 进行 适 配 。 











技 巧 
在 将 设计 稿 发 给 程序 时 ， 通 常会 附 上 一 个 适 配 文件 ， 导 出 界面 各 元 素 当 屏 
Pus 幕 尺 寸 发 生变 化 时 ， 可 以 根据 指定 的 规则 自行 发 生变 更 。 





一 般 来 说 ，iPhone 6 适 配 iPhone 6 Plus， 最 快速 的 适 配 方式 是 按 1.5 倍 缩放 即 可 。 适 配 过 
程 中 ， 图 片 可 以 等 比 缩放 ， 文 字 则 不 行 。 文 字 的 适 配 通常 是 控制 显示 内 容 及 每 行文 字数 。 列 表 则 
是 对 显示 行 数 的 多 少 进行 适 配 。 可 以 通过 规定 边 距 的 数值 来 完成 适 配 。 


打开 “旅行 APP 应 用 , 层 组 ， 查 看 检查 器 中 的 内 容 。 | 
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单 击 “ 导 出 天 气 ” 按 钮 ， 在 弹出 的 对 i 
弹出 的 列表 选择 导出 路 径 ， 单 击 “ 导 出 ”按钮 。 
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层 按 检查 器 中 设置 好 的 信 数 导出 不 同 在 图 层 列表 中 选择 “冷饮 ”图 层 组 ， 单 击 检 





























A 
DP。 下 bh 让 者 直人 

















6 检查 器 中 的 “+” 按 钮 ， 添 加 新 的 列表 


9 图 : i 查 器 中 的 “应 用 切片 对 没 ” 按钮 ， 在 弹出 的 | 
列表 中 选择 Android 选项 。 








.中 了] 项, 在 “大 小 " 文本 框 中 输入 5x。 [0 旧 ”过 池 信 路径 














回 5x 冷 饮 .png 


站 | 四 上 国 目 日 

















单 击 “导出 冷饮 ”按钮 ， 在 弹出 的 对 话 框 中 | 





尘 击 “导出 ”按钮 ， Android , 





xxhdpi 


择 “ 帐 篷 "画板 , 勾 选 检查 器 中 的 “背景 颜色 单 击 “ 导 出 帐篷 ”按钮 ， 在 弹出 的 对 话 框 中 | : 




















帐篷 @2x:jpg 








中 | 和 “导出 时 包含" 复 选民 音 击 打开 格式 列表 , ' | 中 选择 存储 路 径 ， 单 击 “ 导 出 ”按钮 ， 则 导出 | 
白色 背景 的 JPG 格式 | 

















知识 链接 》 享 设计 入 
在 实际 工作 中 ， 设 计 完 成 后 通常 要 将 设计 稿 导 出 为 图 片 ， 然 后 发 送 给 产品 经 理 ， 该 操作 非常 
烦琐 上 且 容 易 出 错 。 如 果 设 计 稿 需要 修改 ， 则 还 要 反复 多 次 发 送 ， 严 和 


重 影响 了 工作 效率 ， 也 加 大 了 
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错误 产生 的 概率 。 

Sketch 为 用 户 提 供 了 云端 功能 一 一 Sketch Cloud。 使 用 Sketch Cloud 可 以 让 用 户 快速 上 
传 Sketch 文件 ， 其 他 用 户 可 以 通过 一 个 链接 访问 浏览 页 面 效 果 。 这 既 节省 了 设计 师 的 时 间 ， 又 便 
于 不 同 用 户 浏览 。 

单 击 工作 界面 右上 和 角 的 Cloud 按钮 , 弹出 “偏好 设置 ”对 话 框 , 单 击 Cloud 选项 卡 , 如 图 8-2 
所 示 。 如 果 用 户 已 经 有 了 Sketch 的 账号 ， 单 击 “ 登 录 ” 按 钮 。 如 果 没 有 则 单 击 “创建 账户 ”按钮 ， 
进入 如 图 8-3 所 示 的 页 面 。 通 过 邮箱 验证 后 ， 登 录 账 号 。 






































二 一 
。 
Si pie seth Chond Share your designs with th 
Ei rt 
属 [| 
Ce 三 
5 而 十 一 PE 
(nsey mr ee 四 
运用 画 而 。 田 展 。 括 作 商 尖 诛 融 议 发 三 
EPE er 
分 享 到 Sketch Cloud Beta 矿 局 
Ron ER ER 
家 
TES. 
创 时 由 户 下 陆 
图 8-2 图 8-3 


单 击 Cloud 按钮 ， 在 弹出 的 对 话 框 中 单 击 Upload 按钮 ， 即 可 将 作品 上 传 到 云端 ， 传 输 过 程 
如 图 8-4 所 示 。 完 成 后 即 可 看 到 浏览 地 址 ， 单 击 即 可 浏览 ， 如 图 8-5 所 示 。 

















AGE 
分 享 到 Sketch Cloud 分 享 到 Sketch Cloud 
上 传 你 的 文档 到 Sketch Cloud， 并 通过 链 sketch.cloud/s/RgLZ 
接 分 享 给 任何 人 。 各所 机 新 :10 和 的 
es 私密 上 传 Upload 
图 8-4 图 8-5 


在 检查 器 中 单 击 “ 导 出 ”按钮 时 ，Sketch 会 自动 生成 切片 ， 用 户 不 仅 可 以 在 检查 器 中 设置 导 
出 参数 ， 还 可 以 通过 执行 “共享 一 导出 画板 为 PDF ”命令 来 导出 PDF 文件 。 





导出 移动 端 APP 界面 
源 文件 : 无 
视频 : 视频 \ 应 用 案例 \ 第 8 章 \8.2. mp4 

















h 3 个 画板 ， 
0 











第 8 章 UI 的 输出 与 交互 设计 




















局 My Fies 
阁 吾 用 各 原 
局 as 
[SE 
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图 pe-20170618enoe 轩 r-2o7osasps 
































层 进行 导出 ， 在 图 层 列表 
图 层 ， 单 击 检查 器 中 的 “导出 ” 
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于 “共享 一 导出 画板 为 PDF” 命令 。 在 弹出 的 “存储 ”对 话 框 中 设置 存储 路 径 ， 
a 击 “确定 ”按钮 。 
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la4 汪 下 ;省 革 ” 获 取 和 使 用 Sketch 插件 

插件 是 让 Sketch 保持 强大 的 秘诀。 很 多 软件 看 起 来 不 支持 的 功能 ， 通 过 插件 都 可 以 实现 ， 大 
大 地 提高 了 工作 效率 。 下 面 介 绍 插件 的 获取 方法 和 几 种 实用 的 插件 。 

3》 1. 获取 插件 

执行 “Sketch 一 偏好 设置 ”命令 ， 弹 出 “偏好 设置 ”对 话 框 ， 单 击 “ 插 件 ” 选 项 卡 ， 如 图 8-6 
所 示 。 单 击 右 下 角 的 “获取 插件 ”按钮 ， 即 可 在 Sketch 网 站 中 寻找 合适 的 插件 ， 如 图 8-7 所 示 。 











[ 外 好 设置 
OO 
测 用 。 硬 有 。 南 层 “ 独 作 ， 凋 刘 库 过 答 Clouc 
第 三 方 开发 者 为 Sketch 创建 的 插件 。 


Sketch naN by @tiguangming 
国 seowmanis runHenguege pugn for Soen 





ee eons um 





苞 到 本 件 -- 


图 8-6 图 8-7 











3 2. Content generator 
Content generator 插件 可 以 自动 填充 类 型 图 片 、 姓 名 、 联 系 方式 等 信息 ， 避 免 手 动 输入 带 
来 的 不 便 ， 如 图 8-8 所 示 。 


©@208 
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图 8-8 


3. Rename it 

使 用 Rename it 插 件 可 以 批量 修改 图 形 的 名 称 。 例如， 选中 所 有 和 矩 形 , 单 击 Rename it 插件 ， 
将 其 命名 为 “%N”， 即 可 得 到 一 串 倒序 排列 的 矩形 命名 。 有 以 下 4 种 具体 的 修改 方式 。 

@@ ”扩展 图 层 名 : 输入 “+” 和 想 要 添加 的 文件 即 可 。 

@ ”图 层 名 顺序 . 输入 “%N” 将 图 层 名 按 顺 序 加 上 数字 后 缀 。 

@@ ”保留 并 移动 原 图 层 名 : 输入 新 的 图 层 名 时 ， 使 用 “*” 代 蔡 原 图 层 名 。 

息 ”添加 图 层 的 长 度 和 宽度 : 输入 “%w” 或 者 “%h” 来 添加 图 层 的 长 度 和 宽度 。 

D4. Sketch Measure 


Sketch Measure 插件 可 以 在 图 标 上 添加 图 形 尺 寸 、 距 离 、 颜 色 和 文本 属性 的 标注 ， 并 自动 
把 附件 编组 ， 方 便 用 户 修改 和 管理 ， 如 图 8-9 所 示 。 


TP 
et 一 
自动 为 标注 编组 ， [EEC 
并 且 你 也 可 以 手动 * 自 scvoreoreor 
更 改 每 个 标注 的 内 容 os | 
+ 他 scuoel4ol69459 


Moves Data 
















































moo 
+ es 
» 号 ament 
?© rom 和 
pop pbor 
;和 外” © 
各 Saved Photo Audio 
图 8-9 
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3 5. Icon stamper 


Icon stamper 插件 可 以 一 键 生 成 iOS 多 种 图 标尺 寸 。 用 户 只 需 做 一 个 最 大 的 图 标 ， 这 个 插件 
即 可 帮助 用 户 生成 一 套 各 种 尺寸 的 图 标 ， 然 后 一 次 性 导出 ， 如 图 8-10 所 示 。 


SR 
图 天 
ys 
ys 


图 8-10 
































让 E 25 寺 > 交付 给 开发 的 文件 


UI 在 Sketch 中 设计 完成 后 ， 要 将 最 终 文 件 交 付 给 开发 人 员 完 成 代码 的 添加 。 设 计 人 员 在 进 
行 设计 稿 交 付 前 , 要 与 开发 人 员 进 行 沟通 , 了 解 开发 人 员 的 习惯 对 设计 稿 的 要 求 , 甚至 命名 规范 等 。 
以 确保 能 够 顺利 完成 开发 工作 ， 减 少 不 必 要 的 反复 。 

通常 交 给 开发 程序 员 的 文件 包括 3 个 文件 夹 ,分 别 是 标注 、 切 图 和 设计 稿 ， 如 图 8-11 所 示 。 


用 - 用 肌 


标注 切 图 设计 稿 
图 8-11 

标注 文件 夹 中 的 文件 是 设计 稿 的 标志 文件 ， 如 图 8-12 所 示 。 在 该 文件 内 ， 向 开发 人 员 展 示 
各 元 素 的 尺寸 、 边 距 和 颜色 等 信息 ; 文字 对 象 还 要 展示 字体 和 行 高 等 
信息 ; 触 控 图 标 则 会 给 出 触 控 范围 。 这 些 数据 越 精确 详细 ， 开 发 实现 
出 来 的 最 终 效果 才能 和 设计 稿 越 接近 。 

切 图 文件 夹 中 包含 界面 中 元 素 的 切 图 。 只 要 是 开发 人 员 不 能 直接 
通过 代码 实现 的 内 容 ， 都 需要 设计 师 切 图 输出 。 例 如 图 标 、 按 钮 和 背 
景 图 等 元 素 。 切 图 文件 夹 中 的 每 个 切 图 根据 系统 的 不 同 会 有 不 同 的 要 
求 , 以 iOS 为 例 , 同一 个 图 标的 切 图 应 至 少 有 @2x 和 @3x 的 尺寸 ， 楼 

143 348 
























Rejo Varghese 


























如 图 8-13 所 示 。 而 且 还 要 包括 图 标 不 同 状态 的 切 图 。 

设计 稿 的 文件 夹 中 是 设计 文件 的 导出 ， 方 便 开 发 人 员 查 看 设计 稿 
本 身 的 样式 。 有 些 开 发 团队 不 会 把 设计 稿 单独 放 到 一 个 文件 夹 中 ， 而 ”EE 
是 将 其 放 入 标注 文件 夹 中 ， 方 便 开 发 人 员 直 接 对 比 查看 。 Ascvbutsuesiar 








图 8-12 
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图 8-13 


在 检查 器 中 单 击 “ 导 出 ”按钮 时 ，Sketch 会 自动 生成 切片 。 用 户 不 仅 可 以 在 检查 器 中 设置 导 
出 参数 ， 还 可 以 通过 执行 “共享 一 导出 画板 为 PDF ”命令 来 导出 PDF 文件 。 
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打开 “Sketch 素材 ”文件 夹 ， 打开 
居 网 页 的 副本 .sketch” 文 件 。 
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反光 标 移动 到 画板 中 ， 此 
刀 的 形状 ， 画 布 中 选中 的 图 层 或 图 层 组 会 显 
示 蓝 色 的 边框 ， 单 击 即 


安 住 鼠 标 左 键 不 放 ， 拖 动 出 一 个 范围 后 释 
| 鼠标， 创建 一 个 切片 。 
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若 要 删除 切片 ， 可 在 图 层 列 表 中 选择 要 删除 
和 击 ， 和 5 出 的 人 划 中 放学" 贡 | 
e] 键 。 
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200 万 家 庭 的 共同 选择 
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SDse 














切片 图 层 检查 器 


选中 “图 层 ”面板 上 的 切片 图 层 ， 检 查 器 面板 如 图 8-14 所 示 。 该 检查 器 中 位 置 、 大 小 属性 
与 其 他 图 层 的 检查 器 相同 。 同 时 包含 Trim transparent pixeis ( 裁 切 透明 像素 ) 、Export group 
contents only ( 仅 导出 分 组 内 容 ) 和 Background color ( 背景 颜色 ) 参数 。 
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图 8-14 


》 1. 裁 切 透明 像素 


勾 选 “ 裁 切 透明 像素 ” 复 选 框 后 ， 切 片 将 自动 删除 切片 内 的 透明 像素 区 域 。 如 果 切 片 范围 大 
层 内 容 ， 在 未 勾 选 该 复 选 框 时 ， 效 果 如 图 8-15 所 示 。 色 选 该 复 选 框 后， 切片 内 容 自动 裁 切 
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尺寸 ， 效 果 如 图 8 一 16 所 示 。 



































图 8-15 


》2. 仅 导 出 分 组 内 容 














图 8-16 


当 切 片 只 针对 某 个 图 层 组 使 用 时 ， 如 果 没 有 勾 选 “ 仅 导出 分 组 内 容 ” 复 选 框 ， 则 将 切片 内 所 
有 内 容 导出 ,如 果 勾 选 “ 仅 导出 分 组 内 容 ” 复 选 框 , 则 只 导出 该 图 层 组 中 的 内 容 , 如 图 8-17 所 示 。 
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图 8-17 
3》3. 背 背景 颜 
ww 全 “背景 颜色 ” 复 选 框 ， 此 时 导出 的 切片 为 透明 背景 。 如 果 希 望 导出 的 切片 
包含 背景 色 ， 则 需要 勾 选 “背景 颜色 ” 复 选 框 。 


背景 色 默 认为 白色 ， 也 可 以 通过 单 击 右 侧 的 色 块 ， 设 置 其 他 背景 色 ， 如 图 8-18 所 示 。 如 果 
勾 选 “背景 颜色 ” 复 选 框 ， 则 “ 裁 切 透明 像素 ”选项 将 失效 。 
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图 8-18 
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泛 本 加: 呈 PP 了解 移动 设备 的 手势 

移动 交互 动 效 设计 是 指 用 户 在 使 用 APP 时 进行 交互 后 产生 的 动画 效果 。 例 如 ， 菜 单 的 滑动 效 
果 、 页 面 之 间 的 跳 转 效果 、 图 片 弹出 的 效果 等 。 

优秀 的 交互 动 效 可 以 提供 超 预 期 的 用 户 体验 , 增强 用 户 黏 性 。 交 互动 效 通常 是 比较 微小 的 动 效 ， 
所 以 设计 人 员 对 每 一 帧 都 要 深思 熟 虑 ， 不 断 尝试 ， 以 便 可 以 获得 视觉 和 体验 的 最 佳 平衡 。 

在 进行 移动 交互 动 效 设计 之 前 ， 应 该 首先 了 解 移动 设备 常见 的 交互 手势 。 这 是 因为 移动 交互 
动 效 的 一 个 作用 是 对 用 户 操作 的 反馈 提示 ， 这 就 需要 设计 师 针 对 不 同 的 手势 设计 不 同 的 动 效 。 

》1. 点击 

点 击 是 触 屏 设备 最 常用 的 一 种 手势 ， 即 用 户 用 手指 单 次 点 击 屏 幕 。 一 般 按钮 和 文本 框 的 触发 
都 需要 使 用 这 种 手势 ， 如 图 8-19 所 示 。 对 于 点 击 手势 的 动 效 设计 应 使 用 明显 的 反馈 效果 ， 且 动 
效 时 间 不 宜 过 长 ， 避 免 影响 执行 效果 。 

》2. 双 击 

双击 手势 是 指 用 户 非常 快速 地 连续 两 次 点 击 屏幕 。 有 点 类 似 鼠 标的 双击 。 在 移动 设备 中 使 用 
双击 手势 的 情况 很 常见 。 在 浏览 图 片 对 图 片 进行 快速 缩放 时 ， 就 是 双击 图 片 ， 如 图 8-20 所 示 。 








图 8-19 


在 设计 双击 缩放 图 片 的 动 效 时 ， 双 击 的 位 置 一 般 默 认为 图 片 缩放 的 中 心 点 ， 也 就 是 以 双击 位 
置 为 中 心 缩放 。 

》3. 拖 动 

拖 动 是 指 用 户 按 住 界 面 上 某 一 元 素 并 对 其 拖 动 的 手势 。 拖 动 的 区 域 可 以 是 任意 的 ， 也 可 以 是 
固定 在 某 一 个 范围 内 。 例 如 ， 拖 动 滑 杆 解锁 界面 ， 如 图 8-21 所 示 。 

了 》4. 长 按 

长 按 是 指 用 户 持续 按 住 某 一 对 象 。 一 般 使 用 该 手势 可 以 执行 删除 或 者 弹出 菜单 功能 。 有 点 类 
似 于 鼠标 右键 的 功能 。 长 按 手势 一 般 需 要 告知 用 户 ， 也 就 是 当 用 户 刚 接触 某 一 应 用 时 ， 基 本 上 不 
会 知道 该 操作 ， 需 要 提前 告知 用 户 。 

这 种 手势 最 具有 代表 性 的 就 是 在 iOS 设备 桌面 上 长 按 图 标 , 即 可 删除 该 APP, 如 图 8-22 所 示 。 

》5. 滑动 

滑动 是 指 用 户 从 屏幕 的 一 侧 清扫 到 屏幕 的 另 一 侧 的 手势 ， 分 为 左 滑动 、 右 滑动 、 上 滑动 和 下 
滑动 。 针 对 滑动 的 起 始 位 置 不 同 会 产生 不 同 的 效果 。 

上 下 滑动 是 最 常见 的 手势 ， 如 图 8-23 所 示 。 当 用 户 浏览 列表 或 文章 时 ， 需 要 多 屏 展 示 的 内 
容 就 需要 上 下 滑动 来 查看 ， 此 时 的 滑动 区 域 应 是 内 容 本 身 的 区 域 。 如 果 从 屏幕 上 方向 下 滑 会 出 现 
系统 层 的 内 容 ， 如 下 拉 通 知 。 从 屏幕 底部 向 上 滑 ， 会 出 现 快捷 功能 。 
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左右 滑动 也 因为 滑动 区 域 的 不 同 而 产生 不 同 的 效果 ， 如 图 8-24 所 示 。 例 如 ， 网 页 广告 可 以 
通过 左右 滑动 实现 多 页 轮 蔡 。 在 iOS 设备 聊天 记录 上 向 左 滑 ， 即 可 出 现 菜单 ， 选 择 删 除 记 录 。 


图 8-23 


图 8-24 





》6. 双 指 缩放 
双 指 缩放 的 手势 是 指 两 个 手指 在 屏幕 上 捏合 和 扩张 的 操作 ， 一 般 用 来 执行 界面 的 缩放 功能 。 
与 双击 放大 操作 ， 双 指 缩放 几乎 可 以 缩放 任何 内 容 ， 且 缩放 更 加 直观 和 精确 。 在 地 图 类 应 用 和 游 


戏 类 应 用 中 使 用 较 多 ， 如 图 8-25 所 示 。 
了 》7. 旋转 
旋转 是 指 用 两 个 手指 在 屏幕 上 旋转 ， 也 可 以 对 某 一 个 元 素 执行 旋转 操作 ， 如 图 8-26 所 示 。 
这 种 操作 在 实际 应 用 中 使 用 不 多 ， 在 特定 场景 尤其 是 游戏 场景 中 较为 常用 。 








点 九 是 Android 系统 中 一 种 特殊 的 图 片 。 一 般 是 针对 背景 图 的 切割 来 说 的 。 使 用 这 种 切片 方 
b= EI 


式 可 以 使 图 片 较 好 地 适应 各 种 分 辨 率 ， 并 根据 内 容 自动 调节 背景 图 片 。 
215@ 
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导出 点 九 切 图 
源 文件 : 源 文件 \ 点 九 切 图 .png 


实战 






新 建 Sketch 空 
| | 选择 “形状 一 贺 





二 “插入 ”按钮 ， 

















视频 :视频 \ 应 用 案例 \ 第 8 章 \8.4. mp4 






互动 效 设 计 从 入 门 到 精通 


在 画布 中 拖 动 鼠标 绘制 




















选择 


器 中 设置 圆 角 和 矩形 的 宽 为 
取消 勺 选 “ 描 边 ” 复 选 框 ， 全 商 外 造 珊 卡 中 | 





63、 高 为 103， 








分 得 
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画 mr- 
局 栈 


2 





10S 用 户 界面 设计 


香 式 文本 | 



































角 答 形 边框 会 制 直线 。 





03 i 拖 动 鼠标 沿 








股 置 描 边 颜色 为 黑 





| 的 底 端 边框 。 


: 【Alt ] 键 的 同时 ， 拖 动 复制 直线 到 






























使 用 相同 的 方法 ， 沿 圆 角 矩形 的 边框 绘制 另 ; 

; 两 条 描 边 颜色 和 描 边 粗细 相同 的 直线 。 同 时 ; 

| 选中 4 条 直线 和 圆 角 和 矩形 ， 单 击 工具 栏 上 的 ; 
“分 组 选中 图 层 ” 按 钮 ， 创 建 图 层 组 。 ! 



































| 在 检查 器 中 打开 “导出 
6 式 为 PNG 格式 , 单 击 “ 







出 ”面板 ， 设 置 导出 
,导出 















































击 “保存 ”按钮 。 








j 角 和 矩形， 在 检查 | 







| 


















bt Group” 按钮 。 
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另存 为 : | 点 九 切 图 | Bd 
标记 : 
位 置 : | 加 康 面 _ 目 


位 图 : [保存 为 Web 格式 
0 元 下摆 全 入 














世 山 和 本 信 ”为 什么 要 使 用 点 九 切 图 


例如 ， 在 聊天 类 软件 中 的 聊天 背景 ， 当 聊天 内 容 长 度 不 同时 ， 聊 天 背 加 ; 
景 会 根据 内 容 自 适应 宽 和 高 ， 如 图 8-27 所 示 。 聊 天 的 内 容 是 用 户 自己 生 | 
成 的 ， 设 计 师 不 可 能 将 所 有 情况 下 的 设计 都 做 出 来 ， 简 单 地 进行 缩放 又 会 








发 生变 形 ， 在 这 种 情况 下 就 可 以 使 用 点 九 切 图 。 a 一 
点 九 切 图 就 是 在 原来 图 片 四 边 加 上 一 个 像素 黑色 的 图 片 ， 如 图 8-28 2 
所 示 。 顶 部 的 黑 线 表示 横向 拉 伸 区 域 ， 底 部 的 黑 线 表示 横向 显示 内 容 区 域 ， "0 国 


左 侧 的 黑 线 表示 纵向 拉 伸 区 域 ， 右 侧 的 黑 线 表示 纵向 显示 内 容 区 域 。 程 序 加 公开 到 
就 是 根据 这 4 条 线 自 适应 的 ， 如 图 8-29 所 示 。 








EC9 


Yo] 
| 呈 


图 8-28 图 8-29 


技巧 
点 九 切 图 四 边 的 黑 线 不 能 省 略 ， 填 充 色 必须 是 纯 黑色 Hex ( 000000 ) ， 不 
Bs 透明 度 为 100%， 必 须 是 1px 的 黑 线 ， 不 能 使 用 0.5px。 





二 书信 二 乓 六 移动 交互 动 效 设计 的 注意 事项 

制作 移动 交互 动 效 时 ， 既 要 保证 动 效 的 效果 ， 也 要 注意 符合 规范 。 下 面 针 对 一 些 注意 事项 进 
行 讲解 。 

》 1. 控制 持续 时 间 

移动 交互 动 效 和 普通 的 动画 不 同 ， 用 户 使 用 程序 的 目的 不 是 为 了 欣赏 动画 ， 过 长 动 效 会 给 用 
户 带 来 不 便 。 因 此 ， 所 有 的 动 效应 该 在 瞬间 完成 。 但 是 动 效 也 不 能 太 短 ， 太 短 的 动 效 会 让 用 户 无 
法 察觉 。 


了 》2. 符合 预期 
一 般 来 说 ， 合 理 的 动 效 是 用 户 可 以 预料 到 的 ， 例 如 滑动 菜单 、 弹 出 面板 等 。 如 果 滑 出 的 方向 
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或 者 弹出 的 方向 不 正确 ， 都 会 给 用 户 带 来 困扰 。 

》 3. 考虑 系统 

目前 最 常见 的 系统 是 iOS 和 Android 系统 。 这 两 个 系统 中 都 包含 了 大 量 的 动 效 。 用 户 通常 对 
系统 中 自 带 的 动 效 已 经 很 熟悉 了 。 为 了 保持 视觉 一 致 性 ， 在 设计 动 效 时 ， 尽 可 能 采用 与 系统 动 效 
类 似 的 效果 ， 这 样 既 可 以 减少 制作 难度 ， 又 可 以 提升 用 户 体验 。 

》4. 动 效 一 致 性 

在 同一 款 应 用 程序 中 ， 表 示 相 同 功 能 的 动 效应 该 相同 。 这 样 可 以 使 用 户 在 熟悉 应 用 后 看 到 动 
效 就 会 了 解 操作 ， 而 且 一 致 的 动 效 可 以 让 软件 整体 风格 统一 。 

》5. 考虑 用 户 的 耐心 

一 些 程序 需要 有 加 载 的 过 程 ， 这 个 过 程 通常 都 比较 长 ， 会 严重 影响 用 户 的 耐心 。 可 以 通过 设 
计 一 个 简单 有 趣 的 动 效 来 分 散 用 户 的 注意 力 ， 例 如 ， 软 件 启动 和 页 面 加 载 时 。 

》6. 考虑 整体 

动 效 存在 的 意义 是 更 好 地 为 程序 服务 。 一 款 运行 流畅 的 应 用 比 花哨 的 应 用 要 重要 得 多 。 过 多 
的 动 效 会 导致 更 多 的 资源 消耗 , 而 且 一 个 动 效 通常 需要 大 量 的 代码 , 会 浪费 大 量 的 开发 时 间 , 所 以 ， 
只 有 合理 地 应 用 动 效 ， 考 虑 整个 产品 的 整体 才 是 正确 的 。 

》7. 模拟 现实 

在 设计 动 效 时 ， 要 尽 可 能 地 模拟 现实 世界 。 这 样 才 会 给 用 户 带 来 共鸣 ， 对 用 户 产生 影响 。 


》8. 引导 用 户 

好 的 动 效 一 定 会 让 用 户 直 观 地 感受 到 接 下 来 的 步骤 ， 并 可 以 指引 用 户 完成 操作 。 同 时 可 以 让 
用 户 清晰 地 感觉 到 不 同 页 面 之 间 的 联系 。 

》9. 层次 感 

在 交互 动 效 设计 时 ， 要 对 每 一 个 元 素 的 运动 规律 和 顺序 进行 充分 思考 ， 使 得 整个 动画 过 程 平 
滑 流 畅 。 元 素 运动 的 规律 应 该 是 有 层次 和 逻辑 的 。 


本 章 通过 “导出 APP 应 用 图 标 ”“ 导 出 移动 端 APP 界面 “为 网 页 划分 切片 "和 “导出 点 九 切 图 ” 
这 4 个 综合 案例 ， 讲 解 了 Sketch 文件 的 输出 ， 并 讲解 了 适 配 分 辨 率 、 分 享 设计 稿 、 移 动 交互 设 
计 事 项 等 必要 的 理论 知识 ， 帮 助 用 户 完 成 和 归纳 最 后 的 Sketch 应 用 和 UI 设计 的 环节 。 通 过 学 习 
本 章 内 容 ， 用 户 可 以 将 前 面 综合 所 学 和 创造 的 作品 导出 、 提 交 并 应 用 到 下 一 个 环节 ， 在 第 9 章 对 
导出 的 文件 进行 使 用 。 
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第 9 章 使 用 Xcode 制作 ET 
交互 效果 认识 Xcode 界面 


创建 和 删除 项 目 


Xcode 是 一 个 程序 开发 工具 ， 本 书 在 最 后 一 章 讲解 Xcode， 是 为 为 旅游 APP 的 跳 转 页 面 抽 
了 向 读者 提供 一 个 可 看 到 通过 Sketch 设计 完成 的 作品 最 后 运行 的 效 作 点 击 效果 
果 ， 使 读者 能 够 更 系统 、 更 立体 地 了 解 Ul 的 设计 流程 及 最 终 效果 。 制作 完整 的 天 气 APP 运行 


效果 


乱 雪 时 本 
2018. 从 疡 开始 


ew 
Es 一 
J 





Xcode 是 苹果 公司 为 开发 者 提供 的 集成 开发 环境 ， 可 构建 适用 于 苹果 iPad、iPhone 及 Mac 
设备 的 应 用 程序 。 在 应 用 程序 的 创建 、 测 试 、 优 化 及 提交 至 App Store 的 过 程 中 ，Xcode 为 开发 
者 提供 了 用 于 管理 整个 开发 工作 流程 的 工具 。 

EE 二 上 : 讲 P> 获 取 与 安装 Xcode 


3》 视频 : 视频 \ 操作 指南 \ 获取 与 安装 Xcode.mp4 
国 E3 打开 App Store， 在 搜索 栏 中 输入 Xcode， 如 图 9-1 所 示 。 单 击 “ 搜 索 ” 按 钮 ， 找 到 
Xcode 软件 ， 如 图 9-2 所 示 ， 单 击 进入 该 程序 的 主页 面 。 


让 去 加 间 针 G 
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GE 跳 转 到 Xcode 程序 页 面 后 ， 单 击 图 标 下 面 的 “获取 ”按钮 ， 如 图 9-3 所 示 ， 弹 出 “需要 ” 
9-4 所 示 。 
































FE 








-了 


EA 





需要 吴 好 
因果 您 有 Apple 加 和 记 码 ， 放 在 此 处 浪 入 ， 例 如， 各 果 人 使用 过 iTunes Store 或 clouc， 您 
BH Apple D. 


Applo ID 更 码 遍 5 了 者? 


取消 

















图 9-3 图 9-4 


GEE3 获取 后 , 单 击 “ 安 装 ”按钮 , 等 待 安装 完成 , 如 图 9-5 所 示 。 待 安装 完成 后 ,用户 可 以 在 “应 
用 程序 ”中 找到 Xcode 软件 ， 如 图 9-6 所 示 。 
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图 9-6 


Xcode 的 快捷 键 


》 1. 与 文件 相关 的 快捷 键 

@ Command + N: 创建 新 文件 。 
Command + Shift + N: 创建 新 项 目 。 
Command + O: 打开 文件 或 项 目 。 
Command + S: 保存 。 

Command + Shift + S: 另存 为 。 
Command + W: 关闭 窗口 。 
Command + Shift + W: 关闭 文件 。 
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》 2. 与 编辑 相关 的 快捷 键 
Command + [: 左 缩 进 。 
Command + ]: 右 缩 进 。 
Command + Option + Left: 折 有 到。 
Command + Option+ Right: 取消 折 径 。 
Command + Option + Shift+Left: 折 芭 全 部 函数 。 
Command + Option+ Shift+Right: 取消 全 部 函数 折 肢 。 
Command + D: 添加 书签 。 
Command + /: 注释 或 取消 注释 。 
Option + .: 参数 提示 。 
Esc: 自动 提示 列表 。 

3. 与 调试 相关 的 快捷 键 
Command + \: 设置 或 取消 断 点 。 
Command + Option+ \: 允许 或 禁用 当前 断 点 。 
Command + Option + B: 查看 全 部 断 点 。 
Command + Return: 编译 并 运行 ( 根据 设置 决定 是 否 启用 断 点 ) 。 
Command + R: 编译 并 运行 ( 不 触发 断 点 )。 
Command + Y: 编译 并 调试 ( 触发 断 点 ) 。 
Command+ Shift + Return: 终止 运行 或 调试 。 
Command + B: 编译 。 
Command + Shift + K: 清理 。 
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党 ( 志 寺 3 国信 启动 Xcode 


3》 视频 : 视频 \ 操 作 指南 \ 启动 Xcode.mp4 


双击 Xcode 应 用 程序 图 标 ， 跳 转 到 Xcode 和 iOS 开发 软件 许可 协议 ， 如 图 9-7 所 示 ， 
单 击 Agree 按钮 ，Xcode 将 进行 初始 化 运行 ， 如 图 9-8 所 示 ， 稍 候 片刻 即 可 。 





the installation and use Xcode. By clicking Agree, you are agreeing to 
the terms of the software license agreements. 


Xcode and iOS SDK License Agreement 
You must agree to both license agreements below in order to complete 





Apple Inc- 


Xcode and Apple SDKs Agreement 


PLEASE SCROLL DOWN AND READ ALL OF THE FOLLOWING TERMS 








Installing components… 
一 一 


图 9-7 图 9-8 
待 初 始 化 运行 后 ， 启 动 Xcode 的 欢迎 界面 ， 如 图 9-9 所 示 。 选 择 Create a new Xcode 
project ( 本 书 中 这 个 选项 最 适用 ) 选项 ， 跳 转 到 新 建 项 目 对 话 框 ， 如 图 9-10 所 示 。 
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Welcome to xcode 一 


No Recent Projects = es 
































penanome promct. 








图 9-10 


取消 勾 选 Show this window when Xcode launches 复 选 框 ， 则 在 下 次 启动 
Xcode 时 不 会 看 到 欢迎 界面 。 若 要 再 次 启动 欢迎 界面 , 执行 Window 一 Welcome 
to Xcode 命令 即 可 。 


使 用 Xcode 欢迎 窗口 


》1. Get startd with a playground 

使 用 Playground 来 开始 新 项 目 ， 它 能 接受 Swift 编辑 代码 的 文件 ， 并 能 交互 性 地 翻译 代码 ， 
它 可 以 用 来 实现 某 项 功能 ， 然 后 将 其 整合 到 产品 中 。 

Playground 能 实时 显示 代码 的 所 有 结果 : 代码 的 结果 能 立刻 显示 出 来 ， 同 时 用 户 做 的 任何 更 
改 都 能 反映 在 整个 文件 中 。 

Bd 2. Create a new Xcode project 

创建 一 个 Xcode 项 目 ， 用 户 也 可 以 执行 Flie 一 New 一 New Project 命令 来 创建 新 项 目 。 





3 3. Clone an existing project 

Xcode 认为 ， 即 使 对 于 小 项 目 来 讲 ， 源 代码 管理 也 非常 重要 ， 单 击 该 链接 可 以 从 源 代码 仓库 
中 获取 的 项 目 基础 上 开发 。 取 回 一 个 已 有 的 项 目 ， 一 般 使 用 SVN 或 者 GIT 等 版 本 控制 软件 来 进 
行 多 人 协作 开发 ， 如 果 已 经 有 SVN 或 者 GIT 的 基础 ， 有 开发 人 员 提供 GIT 或 者 SVN 服务 权限 ， 
那么 可 以 直接 打开 一 个 现成 的 工程 进行 研究 。 

》4. Open another project( 在 “最 近 ” 列 表 的 最 下 面 ) 

单 击 Open another project 链接 会 打开 文件 对 话 框 ， 这 样 就 能 选择 任意 想 要 的 项 目 。 也 可 以 
执行 File 一 Open 命令 来 完成 相同 的 工作 。 

25- 汪 : 对 > 交互 设计 与 交互 式 动画 

以 手机 、 平 板 电 脑 等 移动 设备 访问 互联 网 的 方式 已 经 占据 越 来 越 大 的 比重 ， 这 让 移动 端的 交 
互 体验 变 得 越 来 越 重要 ， 因 此 交互 设计 与 交互 式 动画 成 为 需要 专门 研究 的 课题 。 

3》 1. 交互 设计 的 概述 

这 里 的 交互 主要 是 指 人 机 互动 ， 人 与 人 造物 ( 手机 、 平 板 电 脑 等 ) 的 对 话 行为 和 对 话 方式 。 交 
互 设计 ， 即 通过 构建 简单 有 效 的 心理 映射 模型 ， 在 人 造物 上 体验 出 来 ， 能 够 使 人 掌握 对 人 造物 的 
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操作 ， 建 立 对 人 造物 的 基本 认 知 ， 让 人 造物 的 使 用 符合 创造 的 意图 。 

如 图 9-11 所 示 ， 从 启动 手机 页 面 、 选 择 APP 开始 ， 到 打开 APP、 对 APP 进行 注册 及 登录 
APP 的 一 系列 过 程 即 是 一 个 交互 过 程 ， 其 中 包括 对 产品 进行 选择 、 与 商家 达成 协议 、 建 立 与 其 他 
账号 的 关联 等 一 系列 交互 行为 。 
































使 用 手机 号 登录 
寺中 国 +86 
去 哪儿 旅行 
EE 
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图 9-11 
对 “人 造物 ”可 以 这 样 理 解 ， 当 用 户 使 用 手机 时 ， 手 机 即 是 定义 中 的 人 造物 ， 在 打开 APP 或 
进入 网 页 时 ，APP 和 网 页 也 是 人 造物 ， 而 我 们 从 启动 手机 界面 、 选 择 打开 APP、 进 行 注册 、 搜 
索 等 行为 都 称 为 交互 。 
而 交互 设计 即 是 定义 、 设 计 人 造 系统 的 行为 的 设计 领域 ， 它 定义 了 两 个 或 多 个 互动 的 个 体 之 
间 交 流 的 内 容 和 结构 ， 使 之 互相 配合 ， 共 同 达成 某 种 目的 。 交 互 设计 以 “在 充满 社会 复杂 性 的 物 
质 世界 中 嵌入 信息 技术 ”为 中 心 ， 其 目标 可 以 从 “可 用 性 ”和 “用 户 体验 ”两 个 层面 上 进行 分 析 ， 
关注 以 人 为 本 的 用 户 需求 。 
交互 设计 应 该 智能 化 ， 能 够 帮助 人 们 分 析 、 思 考 和 简化 。 近 年 来 ， 二 维 码 逐 渐 成 为 交互 设计 中 
的 重要 部 分 ， 许 多 商家 将 其 作为 必 有 项 目 ， 它 可 以 更 方便 、 更 迅速 地 完成 某 个 交互 目的 ， 更 便捷 地 
创造 出 通过 一 次 操作 与 多 个 账户 关联 的 结果 。 如 图 
9-12 所 示 ， 页 面 的 登录 需要 手机 来 完成 ， 也 可 以 通 
请 估 用 于 人 IEAPP 扫 到 “| 过 直接 点 击 其 他 已 经 登录 的 账号 来 完成 并 建立 两 者 之 
i 间 的 联系 , 这 是 一 种 新 的 交互 方式 , 已 经 被 广泛 应 用 。 
a 用 户 在 登录 时 需要 输入 校 验 码 ， 但 当前 页 面 并 不 
NA zssnns | 是 让 用 户 每 一 次 都 输入 校 验 码 。 而 是 只 有 当 该 用 户 在 
[| 第 一 次 给 和 错误 的 情况 下 才 会 让 用 户 输入 校 验 码 。 网 
en ie 2 | 站 设置 校 验 码 ， 通 常 是 为 了 避免 机 器 破解 密码 ， 或 者 
人 为 试 出 密码 ， 校 验 码 的 出 现 杜绝 了 这 种 行为 。 


SO 人 AD 》 2. 关于 交互 动画 设计 
图 9-12 在 各 种 交互 式 界面 产品 中 ， 通 常 包含 大 量 的 动 
画 。 好 的 交互 式 动画 能 够 带 给 人 更 加 优越 的 用 户 体验 ， 交 互 设计 受到 了 空前 的 重视 。 人 们 对 产品 
的 要 求 也 越 来 越 高 ， 人 们 不 仅 喜 欢 那些 功能 好 、 实 用 、 耐 用 的 产品 ， 也 更 多 地 倾向 于 产品 给 人 的 
心理 感觉 ， 这 是 用 户 在 追求 功能 和 价格 的 基础 上 所 在 意 的 另 一 个 很 重要 的 方面 。 

提高 体验 的 目的 ， 是 给 用 户 一 些 舒 适 的 、 与 众 不 同 的 或 意料 之 外 的 感觉 。 用 户 体验 的 提高 使 
整个 操作 过 程 符合 用 户 基本 逻辑 ， 使 交互 操作 过 程 顺理成章 ; 而 良好 的 用 户 体验 则 是 用 户 在 这 个 
流程 的 操作 过 程 中 获得 的 便利 和 收获 。 
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交互 式 动画 作为 一 种 提高 交互 操作 可 用 性 的 方法 ， 越 来 越 受到 重视 ， 国 内 外 各 大 企业 郑 在 自 
己 的 产品 中 默默 地 加 入 了 交互 动画 效果 。 如 
图 9-13 所 示 为 Apple iPad 的 交互 动画 效果 。 
交互 式 动画 是 指 在 播放 动画 作品 时 支持 
时 间 响 应 和 交互 功能 的 一 种 动画 ， 也 就 是 说 ， 
动画 在 播放 的 过 程 中 可 以 加 入 参与 者 的 交互 
事件 ， 操 作者 在 一 定 程度 上 能 控制 选择 动画 
的 过 程 ， 使 用 户 由 被 动 的 观众 变 成 主动 的 操 
作者 ， 用 户 根据 自己 的 需求 播放 声音 、 操 纵 
对 象 、 获 取信 息 等 。 
从 心理 学 意义 上 来 分 ， 界 面 可 以 分 为 感 
觉 和 情感 两 个 层次 。 界 面 不 仅仅 给 我 们 带 来 
视觉 、 触 觉 和 听觉 的 感受 ， 还 能 向 我 们 传递 情感 ， 它 是 一 种 传递 情 
感 的 工具 。 很 多 人 认为 交互 设计 就 是 界面 设计 ， 其 实 并 不 是 这 样 的 。 
交互 设计 通常 分 为 流程 交互 设计 和 页 面 呈 现 交互 设计 ， 界 面 设 
计 中 的 交互 设计 只 是 交互 设计 的 一 部 分 ， 它 属于 页 面 呈 现 交互 设计 。 
rr 界面 设计 和 交互 设计 具有 一 定 的 交叉 性 ， 界 面 是 静态 的 ， 而 添加 了 
< 交互 设计 的 界面 则 会 随 着 用 户 的 操作 动 起 来 。 
2018. 从 多 开始 如 图 9-14 所 示 为 一 个 心理 咨询 APP 的 启动 界面 ， 呈 现 并 传 
递 了 商家 的 情感 和 用 户 的 期 望 ， 给 人 以 座 然 、 温 暖 及 明朗 的 感受 ， 
右上 角 显示 着 不 断 跳动 的 秒 数 ， 通 过 点 击 跳 过 ， 用 户 可 以 直接 跳 过 
”这 个 画面 ， 而 同时 界面 呈现 出 的 美感 又 给 人 以 不 想 跳 过 的 感觉 。 
: 交互 式 界面 设计 中 加 入 动画 设计 ， 可 以 很 好 地 满足 交互 设计 发 
展 的 趋势 ， 大 大 提高 了 界面 的 易 用 性 。 当 用 户 进行 了 一 步 操作 后 ， 
Oa 会 看 到 操作 的 表现 。 也 就 是 说 操作 一 步 ， 就 会 得 到 一 步 反 馈 。 在 产 
Ne 品 中 加 入 动画 过 程 ， 是 产品 对 用 户 操作 进行 的 合理 反馈 ， 其 目的 在 
于 提高 其 识别 性 。 
图 9_14 这 个 通过 点 击 连 续 跳 转 的 界面 ， 每 一 步 操作 都 有 一 个 反馈 ， 在 
其 内 容 与 交互 结果 中 ， 不 仅 起 到 直观 、 迅 速 地 宣传 和 营销 产品 的 目 
的 , 同时 通过 智能 化 的 手段 考虑 用 户 的 利益 , 并 以 此 为 出 发 点 使 整个 交互 过 程 人 性 化 并 具有 亲和力 ， 
如 图 9-15 所 示 。 























附近 商家 


体验 新 版 本 啦 ! 











图 9-15 
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Xcode 的 界面 窗口 显得 比 Sketch 多 了 一 点 , 但 总 体 上 涉及 的 功能 和 位 置 其 实 差不多 ， 因 此 ， 
在 介绍 各 功能 面板 和 检查 器 窗口 之 前 , 可 以 按 区 域 划分 为 工具 栏 、 工 具 区 、 编 辑 区 、 导 航 区 和 调试 区 ， 
如 图 9-16 所 示 。 
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9.2.1 按 区 域 划 分 Xcode 界面 


@ ”The Toolbar( 工具 栏 ): 选择 视图 ， 运行 APP,， 在 不 同 布局 界面 切换 的 地 方 ， 如 图 9-17 








所 示 。 
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图 9-17 
The Utility Area( 工具 区 ): 包含 检测 器 和 一 些 库 ， 如 图 9-18 所 示 。 
The Editing Areal( 编辑 区 ): 所 有 奇迹 诞生 的 地 方 ， 包 括 它 上 方 的 Jump bar。 
The Navigation Area( 导航 区 ): 导航 整个 工程 、 警 告 、 报 错 等 地 方 ， 如 图 9-19 所 示 。 


万 
旬 
@ 
@ The Debugging Areal 调试 区 ): 包括 调试 窗口 和 变量 检测 器 ， 如 图 9-20 所 示 。 
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》 1. 与 程序 运行 相关 的 按钮 

从 左 到 右 分 别 是 : 运行 按钮 、 停 止 按钮 、 选 择 运 行 模板 平台 ， 如 图 9-21 所 示 。 
》 2. 与 编辑 器 相关 的 按钮 

从 左 至 右 分 别 是 : 标准 编辑 器 、 辅助 编辑 器 和 版 本 编辑 器 ， 如 图 9-22 所 示 。 


> 用 加 A ete 


图 9-21 图 9-22 
》 3. 与 面板 控制 相关 的 按钮 
从 左 至 右 分 别 是 : 隐藏 左 侧面 板 、 隐 藏 底部 面板 、 隐 藏 右 侧面 板 ， 如 图 9-23 所 示 。 


》4. 导航 栏 
从 左 至 右 为 项 目 导 航 、 源 控制 导航 、 符 号 导航 、 搜 索 导 航 、 问 题 导航 、 测 试 导航 、 调 试 导 航 、 
断 点 导航 和 日 志 导 航 ， 如 图 9-24 所 示 。 


El 


图 9-23 图 9-24 
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9.2.3 工具 区 


》 1. 检查 器 面板 

检查 器 面板 包括 普通 源 文件 面板 和 故事 板 面板 ， 如 图 9-25 所 示 。 普 通 源 文件 面板 中 包含 文 
件 检查 器 和 快速 帮助 器 ， 故 事 板 面板 中 除了 文件 检查 器 和 快速 帮助 器 之 外 ， 还 有 身份 检查 器 、 大 
小 检查 器 和 连接 检查 器 。 

文件 检查 器 : 包括 文件 名 称 、 文 件 类 型 和 保存 路 径 等 信息 。 

快速 帮助 器 : 将 光标 停留 在 系统 类 时 , 该 面板 会 显示 该 类 别 的 参考 手册 、 使 用 指南 和 示例 代码 ， 
如 图 9-26 所 示 。 
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ME soks iOS 2.0+, tyOS 90+ 
区 TS 
由 天 SAPP Declared In UIKit 
[RAPpTests More Class Reference 
DD 四 天 Appuress 





图 9-25 图 9-26 


身份 检查 器 ; 管理 界面 组 件 类 、 实 现 类 和 恢复 1D 等 标识 性 的 属性 ， 如 图 9-27 所 示 。 
属性 检查 器 : 管理 界面 组 件 拉 伸 方式 和 背景 色 等 属性 ， 如 图 9-28 所 示 。 
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大 小 检查 器 : 管理 界面 组 件 宽 高 X、Y 轴 坐 标 等 属性 ， 如 图 9-29 所 示 。 
连接 检查 器 : 管理 界面 组 件 与 程序 代码 之 间 的 关联 性 ， 如 图 9-30 所 示 。 



























































B® 是 ©® 
View 
Show Frame Rectangle 3] 
| 0%| as6l: 
x 而 
375|2| eal 
Width Height 
Arrange Position View =] 
Autoresizing | _I 
- Outlet Collections 
Layout Margins ，Default gestureRecognizers O 
+ 门 Preserve Superview Margins Referencing Outlets 
+ 口 Follow Readable Width New Referencing Outlet 
Sie Ara etethe eg Referencing Outlet Collections 
DOD Safe Area Layout Guide New Referencing Outlet Collection 
图 9-29 图 9-30 
3》 2. 库 面板 
从 左 至 右 分 别 是 文件 库 面板 、 代 码 片段 库 面板 、 对 象 库 面板 和 媒体 库 面板 ， 如 图 9-31 所 示 。 
口 0 @ 
图 9-31 


文件 库 : 管理 文件 模板 ， 快 速 创建 指定 类 型 文件 ， 可 以 直接 拖 入 项 目 中 ， 如 图 9-32 所 示 。 
代码 片段 库 : 管理 各 种 代码 片段 ， 可 以 直接 拖 入 源 代码 中 ， 如 图 9-33 所 示 。 


















































| _ DO0ea | | 上 D ff @ 四 

四 a m h © 区 CBlock typedef - Define a block as atype 
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国术 DD | 国 … 

ls 9 | 加 | 国生 
总 总 PE EE a S 人 C++ Class Template - Define a new class template 
h a | {} C++ Function Template - Define a new function template 
攻 | 本 是 围 7 | {} ea Namospace Definition - Define a new namespace or extend an existing 
图 9-32 图 9-33 


对 象 库 : 界面 组 件 ， 可 以 直接 拖 入 故事 板 中 ， 如 图 9-34 所 示 。 
媒体 库 : 管理 各 种 图 片 、 音 频 等 多 媒体 资源 ， 如 图 9-35 所 示 。 
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图 9-35 





控件 、 文 字 、 图 片 等 的 排版 与 编辑 在 编辑 区 进行 ， 选 择 导航 区 的 列表 选项 即 可 对 该 选项 的 内 
容 进行 编辑 ， 如 图 9-36 所 示 。 
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9.2.5 ”导航 区 


》 1. 项 目 导航 面板 

项 目 导航 面板 包括 源 文件 、 属 性 文件 、 单 元 测试 项 目 和 目标 应 用 ， 如 图 9-37 所 示 。 
源 文件 : 在 “测试 ”目录 下 的 “.h” 和 “.m” 后 缀 文件 是 源 文件 。 

属性 文件 : 在 “测试 ”下 的 “测试 Tests” 目 录 下 是 属性 文件 图 片 等 。 

单元 测试 项 目 : “测试 UITests” 是 工程 的 单元 测试 项 目 。 

目标 应 用 : Products 目录 下 的 文件 是 目标 应 用 。 


》 2. 符号 导航 面板 


符号 导航 面板 包括 用 符号 显示 工程 中 的 类 、 项 目 和 属性 ， 如 图 9-38 所 示 。C 表示 类 ，M 表 
示 方 法 ，P 表示 属性 。 点 击 对 应 的 方法 或 者 属性 ， 能 够 快速 定位 到 这 个 类 中 。 

































































= 着 -是 了 是 | 
加 测试 M 

了 国 测 试 
而 AppDelegate.h A 加 
网 AppDelegate.m A 局 品 QAG 至 口上 有 目 
|h) ViewController.h A [Ferarchical rt 
四 ViewController.m A * 回 _Tests 
辐 Mainstoryboard A * 回 -unests 
国 Assets xcassets M 上 回 Apppelegate 
机 * 回 viewcontroner 
BB Launchscreen.storyboard A 
ed A 白 国 品 QAGO 理 口 目 
网 main.m A 

va WitTests Horarchical MEE 
加 _Tests.m A 冯 本 
回 Info.plist A 回 - 

™ | 测试 UITests -testExample 
加 UITests.m A @ -testPerformanceExample 
辕 Info.plist 六 » 时 

> [9 AppDelegate 
加 ss » 回 viewcontroller 
图 9-37 图 9-38 


》 3. 搜索 导航 面板 和 问题 导航 面板 

在 搜索 导航 面板 的 搜索 框 中 输入 要 搜索 的 字符 串 ， 按 【 Enter 】 键 即 可 搜索 出 包含 该 字符 串 的 类 ， 
如 图 9-39 所 示 。 

问题 导航 面板 中 会 显示 存在 的 警告 或 者 错误 ， 如 图 9-40 所 示 。 
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9-39 图 9-40 
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》4. 测试 导航 面板 和 调试 导航 面板 


在 测试 导航 面板 中 单 击 testExample 后 面 的 执行 按钮 , 即 可 运行 该 单元 测试 ,如 图 9-41 所 示 。 
调试 导航 面板 中 显示 了 各 线程 的 详细 信息 ; 通过 添加 断 点 面板 ， 可 在 OCTViewController. 


m 中 添加 一 个 断 点 。 
》 5. 日 志 导航 面板 


日 志 导航 面板 列 出 了 项 目 开 发 过 程 中 构建 、 生 成 、 运 行 的 过 程 ， 如 图 9-42 所 示 ， 每 次 该 过 


程 都 可 以 通过 日 志 导 航 面 板 查看 。 
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站 测试 Tests 2 tests 
TT 国 _Tests 
贺 testExample 
贺 testPerformanceExample 
™ 站 测试 UITests 1 test 
v 国 _UiTests 
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图 9-41 


9.2.6 ”调试 区 





白 国 中 QQ AS 至 


DD 








By Time 








了 维 测 试 昨 天 下 午 1:35 
人 六 Build 昨天 下午 1:35 

Y 加 Project 今天 上 午 11:49 
fp Update Signing 今天 上 午 11:49 
fp update Signing 今天 上 午 10:29 








图 9-42 




















调试 区 是 指 底部 的 调试 面板 ， 用 于 Xcode 显示 控制 台 调 试 输出 信息 ， 如 图 9-43 所 示 。 
四 View as:iphone8(wcC nR) 一 100% 十 尼 tot tal 
回 本 
Auto $ © All Output $ © | 全 | 口 口 
图 9-43 


常见 的 交互 动画 效果 


经 过 前 面 的 学 习 了 解 到 ， 交 互 设计 是 指 设计 人 和 产品 或 服务 互动 的 一 种 机 制 。 以 用 户 体验 为 


基础 进行 人 机 交互 ， 设 计 师 要 考虑 用 户 的 背景 、 


最 终 用 户 需求 的 产品 。 


使 用 经 验 及 在 操作 过 程 中 的 感受 ， 从 而 设计 符合 


交互 设计 的 目的 是 使 产品 能 够 让 用 户 应 用 起 来 简单 便捷 。 同 时 ， 任 何 产品 功能 的 实现 都 是 使 


用 人 机 交互 来 完成 的 。 


交互 动画 效果 的 制作 可 以 让 交互 设计 师 更 清晰 地 阅 述 自己 的 设计 理念 ， 同 时 帮助 程序 管理 人 
员 和 研发 人 员 在 评审 中 解决 视觉 上 的 问题 。 交 互动 画 具 有 续 密 清晰 的 逻辑 思维 、 配 合 研发 人 员 更 
好 地 实现 效果 和 帮助 程序 管理 人 员 更 好 地 完善 产品 的 优点 。 同 时 使 用 After Effects 制作 的 交互 动 
画 可 以 高 保 真 地 帮助 设计 师 们 完成 想 要 的 效果 ， 赋 予 产 品 活力 。 

在 进行 交互 动画 的 制作 之 前 ， 首 先 要 了 解 交 互动 画 在 APP 中 常见 的 效果 。APP 中 常见 的 交 
互动 画 效果 并 不 复杂 ， 可 以 简单 地 分 为 通过 点 击 和 滑动 实现 的 4 种 形式 ， 分 别 为 位 移 、 旋 转 、 变 
换 和 擦 除 。 如 图 9-44 所 示 为 交互 动画 的 4 种 形式 。 
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完成 一 个 交互 设计 ， 要 先 从 创建 一 个 项 目 开始 ， 下 面 通过 一 个 案例 介绍 如 何 创建 和 删除 一 个 
项 目 ， 并 在 项 目 中 选择 模板 。 


创建 和 删除 项 目 
源 文件 : 无 





视频 :视频 \ 应 用 案例 \ 第 9 章 \9.3.mp4 












启动 Xcode， 选 择 Create a new Xcod 
roject 选项 ， 新 建 一 个 软件 工程 。 


弹出 的 模板 选项 面板 中 ，Xcode 默认 选择 
OS 选项 列表 , 选择 Single View APP 选项 。; 















Choose aterrplete for your new project: 
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打开 的 对 话 框 中 ， 选择 存储 路 径 ， 
Create 按钮 ， 打 开 新 创建 项 目的 界面 。 
































































标 ， 使 其 都 变 为 蓝 色 ， 
一 个 项 目 完整 的 界面 就 显示 出 来 了 。 
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i 创建 并 保存 的 项 目 将 默认 被 陈列 到 启动 界面 | 
: 的 右 人 出 ， 再 次 运行 Xcode 时 ， 可 以 很 方便 地 | 

.将 其 直接 打开 。 若 要 删除 该 项 目 ， 可 右 击 ，: 
| 选择 Show in Finder 选项 。 


| ti 滑动 鼠标 展开 列表 的 全 部 
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将 文件 夹 及 内 容 删 除 后 ， 可 以 看 到 欢迎 界面 
已 经 没有 该 项 目 ， 表 示 该 项 目 被 彻底 删除 


i : 
es i i 
= Lh #- #- EE E : 


加 3 EF pr i Welcome to Xcode 


Xcode 中 的 项 目 实际 上 是 一 个 文件 夹 ， 打 开 
文件 位 置 ， 将 其 移 到 废 纸 签 ， 则 删除 该 项 目 。 
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Xcode 中 的 应 用 模板 “| [商人 
为 了 方便 广告 用 户 的 使 用 ， 最 新 版 me a 
的 Xcode 增加 了 更 多 的 模板 选项 , 如 | [LI | 番  m 区 Ec 
图 9-45 所 示 。 Singl pp Game A Deine Master-Detail App 
》 1. 模板 类 别 两 国 明 9| 
iOS: 由 苹果 公司 开发 的 移动 操作 | Wop SheerPeck pp MesoeAp 
系统 。 Framework & Library 
watchOS: 苹果 公司 基于 iOS 系 合 [ 鲍 ] NN] 
统 开发 的 一 套 使 用 于 Apple Watch 的 Cocoa Touch Cocos Touch Metal Library 
手表 操作 系统 。 PY 
tvOS: 专门 为 第 四 代 Apple TV 设 | 一 “一 “ En 
计 的 操作 系统 。 图 9-45 


MacOS 一 套 运行 于 苹果 Macintosh 

系列 计算 机 上 的 操作 系统 。MacOS 是 首 个 在 商用 领域 成 功 的 图 形 用 户 界 面 操 作 系 统 。 
Cross-piatform: 其 他 跨 平台 模板 。 
》2. 主要 常用 模板 
Single View App: 一 种 常见 的 列表 式 布局 ( 类 似 于 iOS 中 的 备忘录 结构 )。 
Page-Based Application: 基于 页 面 的 应 用 ( 运行 后 我 们 会 发 现 有 纸 质 书 的 翻 页 效果 )。 
Tabbed Application: 常见 的 底部 有 Tab 导航 的 模板 。 
Game: 游戏 模板 。 
Augmented Reality App: 增强 现实 应 用 程序 模板 (Ingress 是 全 球 受 欢 迎 的 增强 现实 APP)。 
Document Based App: 基于 文档 的 应 用 程序 。 
Master-Detail App: 主 应 用 程序 的 详细 环节 。 
Tabbed APP: 标签 的 应 用 。 
iMessage App: 即时 通信 应 用 。 


了 导入 和 显示 图 片 


》 视频 : 视频 \ 操 作 指南 \ 导 入 和 显示 图 片 .mp4 


在 启动 界面 中 单 击 创建 Create a new Xcode project 项 目 ， 选 择 一 个 Single View APP 
模板 ， 设 置 项 目 名 称 和 其 他 参数 ， 如 图 9-46 所 示 。 
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在 左 侧 的 文件 列表 中 找到 Assets.xcassets， 它 以 一 个 文件 夹 的 标志 显示 ， 选 择 Assets. 
xcassets 选项 ， 左 侧 会 出 现 第 二 行列 表 ， 选 择 Appicon 选项 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 
New Image Set 选项 ， 如 图 9-47 所 示 。 
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图 9-48 图 9-49 


在 工作 界面 的 右 下 方 可 以 看 到 控制 库 ， 找 到 Image View 控件 ， 如 图 9-50 所 示 。 将 其 拖 
入 模板 中 ， 移 动 控制 的 位 置 并 拖 动 边框 调整 大 小 ， 如 图 9-51 所 示 。 
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图 9-50 
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单 击 模板 中 的 控件 ， 在 右 侧 检查 器 中 选择 Show the Attributes inspector 选项 ， 在 
Image View 面板 中 , 单 击 Image 的 小 三 角 按钮 , 选择 刚刚 置 入 文件 夹 中 的 图 片 lunch1, 如 图 9-52 
所 示 。 
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图 9-52 


WE 2 填 > 交互 式 动画 实现 法 则 

交互 式 动画 在 设计 时 要 遵守 两 个 原则 : 第 一 ， 该 产品 要 有 一 个 完整 的 、 系 统 化 的 可 预见 的 目 
标 和 过 程 ， 让 用 户 在 一 系列 的 操作 步骤 中 通过 推理 和 判断 可 以 预测 到 效果 。 第 二 ， 让 操作 具有 可 
见 性 ， 在 进行 每 一 步 操作 后 ， 都 会 得 到 来 自 系统 的 一 个 反馈 ， 在 界面 上 通过 一 个 变化 提示 或 说 明 ， 
使 用 户 了 解 自己 的 操作 所 达到 的 进度 和 结果 。 

除了 以 上 两 点 外 ， 还 要 考虑 以 下 的 一 些 法 则 。 


》1. 易 用 性 

易 用 性 的 设计 要 点 是 让 产品 的 设计 尽量 符合 使 用 者 的 习惯 和 需求 ， 是 一 种 以 使 用 者 为 中 心 的 
设计 理念 。 它 希望 使 用 者 在 使 用 的 过 程 中 不 会 产生 压力 或 感到 挫折 ， 并 能 让 使 用 者 在 使 用 功能 时 ， 
用 最 少 的 努力 发 挥 最 大 的 功效 。 

易 用 性 原则 是 需要 设计 师 在 进行 交换 式 动画 设计 时 重点 考虑 的 原则 , 具体 需要 注意 以 下 几 点 。 

1) 不 强迫 用 户 

考虑 用 户 的 感受 ， 不 要 随意 添加 动画 。 在 添加 动画 时 ， 给 一 个 可 以 退出 的 交互 按钮 或 选项 ， 
动画 的 置 入 需要 在 适当 的 时 候 和 位 置 ， 充 分 考虑 和 分 析 用 户 的 需求 ， 不 要 太 随意 。 
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2) 容易 识别 

加 入 交互 式 动画 后 ， 整 个 界面 的 操作 识别 性 会 大 幅 提 高 。 但 是 注意 不 要 让 用 户 被 动画 误导 ， 
陷入 困惑 。 

3) 符合 用 户 的 预期 

用 户 对 于 动画 也 是 有 预期 的 ， 就 像 交 互 方式 一 样 ， 通 常 都 有 通用 并 常见 的 方式 ， 尽 量 采 用 人 
们 比较 熟悉 的 方式 创建 动画 。 

4) 适用 目标 人 群 

动画 应 该 符合 自己 产品 的 定位 ， 动 画 在 交互 界面 上 应 该 是 起 锦上添花 的 作用 ， 要 充分 考虑 产 
品 适用 人 群 的 感受 。 

以 Android 系统 的 交互 式 动 画 为 例 ， 
其 易 用 性 就 非常 强 。 容易 识别 并 符合 预期 ， 
交互 过 程 不 显 多 余 并 非常 舒适 。 如 图 9-53 
所 示 为 两 个 基本 操作 的 交互 式 动 画 效果 。 

这 种 交互 式 动 画 可 以 很 好 地 融入 操作 
环境 中 ， 符 合用 户 的 预期 。 同 时 还 需要 注 
意 ， 行 业 的 不 同 ， 交 互动 画 也 应 该 有 所 区 
分 ， 就 像 操作 系统 一 样 ， 针 对 不 同 的 人 群 ， 图 9-53 
就 要 有 不 同 的 版 本 。 


》 2. 有 效 性 

有 效 性 是 指 产品 通过 策划 的 活动 使 效果 最 终 达 到 与 预期 一 致 。 对 于 交互 式 动画 来 说 ， 是 指 交 
互 式 动画 要 达到 的 结果 程度 ， 交 互 式 动画 的 使 用 都 有 其 目的 ， 有 的 是 为 了 提高 识别 性 ， 有 的 是 为 
了 让 其 操作 方式 更 加 生动 酷 炉 。 为 了 实现 这 些 目的 ， 交 互 式 动画 过 程 要 尽量 简洁 ， 让 用 户 把 所 有 
的 操作 精力 都 集中 在 产品 的 操作 上 。 

具体 需要 注意 以 下 两 点 。 

@ ”交互 操作 要 简洁 、 直 接 ， 不 要 让 用 户 过 多 思考 。 

@ ”交互 式 动画 前 后 要 有 一 致 性 。 

对 一 些 功能 性 的 产品 来 说 ， 有 效 性 尤其 重要 ， 例 如 ，Android 系统 下 的 支付 宝 ， 其 客户 端的 
有 效 性 就 非常 强 ， 用 户 可 以 快速 找到 想 要 操作 的 功能 ， 完 成 任务 ， 如 图 9-54 所 示 。 
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3》 3. 高 效 性 

当 设计 师 为 界面 加 入 交互 动画 时 ， 不 应 该 使 产品 用 起 来 “更 慢 ”， 这 就 是 所 谓 的 高 效率 。 交 
互 式 动画 应 该 高 效 ， 通 过 降低 少许 的 性 能 来 大 幅度 提高 可 用 性 是 一 种 很 好 的 方式 。 实 现 整个 交互 
式 动画 的 高 效 性 ， 要 注意 以 下 几 点 。 

1) 交互 式 动 画 不 能 明显 影响 产品 的 性 能 

这 一 点 非常 明确 ， 设 计 师 可 以 在 界面 中 随意 地 加 入 交互 动画 ， 前 提 是 不 能 在 加 入 交互 式 动画 
后 让 产品 的 使 用 效率 明显 降低 。 

2) 不 能 让 用 户 感觉 使 用 起 来 慢 

动画 如 果 加 入 的 不 合适 或 如 入 的 过 多 ， 在 一 定 程度 上 会 延长 整个 交互 的 时 间 ， 让 使 用 者 整个 交 
互 的 流程 变 慢 ， 使 得 用 户 的 操作 效率 降低 ， 影 响 用 户 的 使 用 体验 。 如 图 9-55 所 示 为 一 款 手 机 游戏 的 
交互 动画 ， 当 用 户 点 击 后 ， 就 会 出 现 该 动画 ,每 次 点 击 都 会 出 现 ， 这 就 会 让 用 户 感觉 厌烦， 影响 体验 。 








图 9-55 
虽然 现在 硬件 水 平 发 展 很 快 ， 但 是 ， 人 们 在 选择 产品 时 ， 在 很 大 程度 上 还 是 会 考虑 到 产 
品 的 性 能 ， 追 求 产 品 的 性 价 比 。 所 以 ， 交 互 式 动 画 的 加 入 ， 不 应 该 使 产品 本 身 的 性 能 明显 
降低 ， 至 少 用 户 不 应 该 看 到 性 能 降低 。 同 时 ， 合 理 使 用 动画 可 以 让 用 户 感 受到 产品 性 能 的 


提高 。 
当 产 品 进行 大 量 的 计算 时 ， 通 常会 需 
兴 。 Yr 一 定 的 时 间 ， 这 时 产品 如 果 处 于 “假死 ” 
状态 ， 给 用 户 感觉 会 很 不 好 ， 如 果 此 时 执 
正 淮 备 复制 行 一 个 小 程序 , 计算 一 下 处 理 所 需 的 时 间 ， 





| 取消 用 户 体验 感 就 会 大 大 的 提升 ， 最 常见 的 就 是 
当 Windows 系统 复制 文件 时 的 动画 效果 ， 如 


























国王 9-56 所 示 。 
3》 4. 容错 性 
容错 性 是 指 计算 机 系统 并 不 因为 存在 故障 而 失效 。 对 于 交 
互 式 动画 来 说 ， 就 是 让 用 户 对 交互 式 动画 有 着 很 好 的 可 控 性 ， 完成 对 打开 (D) 
让 用 户 感觉 安全 放心 。 总 是 打开 此 类 文件 (A) 
要 实现 交互 式 动画 的 容错 性 ， 需 要 注意 以 下 几 点 。 后 (P) 
1) 宽容 用 户 的 错误 i 
如 果 操作 后 的 一 个 交互 式 动画 比较 长 ， 人 允许 用 户 选择 跳 过 取消 (O) 
或 者 取消 ， 同 时 也 应 该 为 用 户 留 有 返回 的 入 口 。 8” 制作 新 浪 后 二 用 户 .…mp4 
2) 在 设计 上 尽量 减少 用 户 操作 错误 的 概率 eh 77MB 











交互 式 动画 对 于 容错 性 的 处 理 有 着 先天 的 优势 。 交 互 式 动 
画 本 身 就 是 一 个 过 程 , 用 户 可 以 随时 “后 悔 ”, 如 图 9-57 所 示 。 
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3》 3. 高 效 性 

当 设计 师 为 界面 加 入 交互 动画 时 ， 不 应 该 使 产品 用 起 来 “更 慢 ”， 这 就 是 所 谓 的 高 效率 。 交 
互 式 动画 应 该 高 效 ， 通 过 降低 少许 的 性 能 来 大 幅度 提高 可 用 性 是 一 种 很 好 的 方式 。 实 现 整个 交互 
式 动画 的 高 效 性 ， 要 注意 以 下 几 点 。 

1) 交互 式 动 画 不 能 明显 影响 产品 的 性 能 

这 一 点 非常 明确 ， 设 计 师 可 以 在 界面 中 随意 地 加 入 交互 动画 ， 前 提 是 不 能 在 加 入 交互 式 动画 
后 让 产品 的 使 用 效率 明显 降低 。 

2) 不 能 让 用 户 感觉 使 用 起 来 慢 

动画 如 果 加 入 的 不 合适 或 如 入 的 过 多 ， 在 一 定 程度 上 会 延长 整个 交互 的 时 间 ， 让 使 用 者 整个 交 
互 的 流程 变 慢 ， 使 得 用 户 的 操作 效率 降低 ， 影 响 用 户 的 使 用 体验 。 如 图 9-55 所 示 为 一 款 手 机 游戏 的 
交互 动画 ， 当 用 户 点 击 后 ， 就 会 出 现 该 动画 ,每 次 点 击 都 会 出 现 ， 这 就 会 让 用 户 感觉 厌烦， 影响 体验 。 








图 9-55 
虽然 现在 硬件 水 平 发 展 很 快 ， 但 是 ， 人 们 在 选择 产品 时 ， 在 很 大 程度 上 还 是 会 考虑 到 产 
品 的 性 能 ， 追 求 产 品 的 性 价 比 。 所 以 ， 交 互 式 动 画 的 加 入 ， 不 应 该 使 产品 本 身 的 性 能 明显 
降低 ， 至 少 用 户 不 应 该 看 到 性 能 降低 。 同 时 ， 合 理 使 用 动画 可 以 让 用 户 感 受到 产品 性 能 的 


提高 。 
当 产 品 进行 大 量 的 计算 时 ， 通 常会 需 
兴 。 Yr 一 定 的 时 间 ， 这 时 产品 如 果 处 于 “假死 ” 
状态 ， 给 用 户 感觉 会 很 不 好 ， 如 果 此 时 执 
正 淮 备 复制 行 一 个 小 程序 , 计算 一 下 处 理 所 需 的 时 间 ， 





| 取消 用 户 体验 感 就 会 大 大 的 提升 ， 最 常见 的 就 是 
当 Windows 系统 复制 文件 时 的 动画 效果 ， 如 


























国王 9-56 所 示 。 
3》 4. 容错 性 
容错 性 是 指 计算 机 系统 并 不 因为 存在 故障 而 失效 。 对 于 交 
互 式 动画 来 说 ， 就 是 让 用 户 对 交互 式 动画 有 着 很 好 的 可 控 性 ， 完成 对 打开 (D) 
让 用 户 感觉 安全 放心 。 总 是 打开 此 类 文件 (A) 
要 实现 交互 式 动画 的 容错 性 ， 需 要 注意 以 下 几 点 。 后 (P) 
1) 宽容 用 户 的 错误 i 
如 果 操作 后 的 一 个 交互 式 动画 比较 长 ， 人 允许 用 户 选择 跳 过 取消 (O) 
或 者 取消 ， 同 时 也 应 该 为 用 户 留 有 返回 的 入 口 。 8” 制作 新 浪 后 二 用 户 .…mp4 
2) 在 设计 上 尽量 减少 用 户 操作 错误 的 概率 eh 77MB 











交互 式 动画 对 于 容错 性 的 处 理 有 着 先天 的 优势 。 交 互 式 动 
画 本 身 就 是 一 个 过 程 , 用 户 可 以 随时 “后 悔 ”, 如 图 9-57 所 示 。 
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图 9-57 
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上 
| 
St 


在 执行 下 载 交互 式 动画 时 ， 用 户 可 以 随时 选择 “暂停 ”和 “取消 ”下 载 。 

在 很 多 的 计算 过 程 中 ， 用 户 来 不 及 反应 并 做 修改 处 理 。 加 入 交互 式 动画 ， 在 很 多 情况 下 可 以 
解决 这 个 问题 ， 让 使 用 者 对 过 程 更 有 可 控 性 。 同 时 ， 交 互 式 动画 可 以 用 来 提示 用 户 ， 让 用 户 少 犯 
或 者 不 犯错 误 。 


Xcode 有 一 个 文件 库 可 以 用 来 存放 图 片 素材 ，iPhone 5 以 前 ，1 倍 像素 的 图 片 即 可 在 屏幕 上 显 
示 清 晰 的 界面 ，iPhone 5 之 后 一 直到 现在 被 广 为 使 用 的 iPhone 8， 开 始 以 2 倍 像素 显示 ， 而 最 
新 推出 的 iPhone X 对 显示 图 片 的 质量 要 求 更 高 ， 已 经 达到 了 3 倍 像素 。 








要 为 旅游 APP 的 跳 转 页 面 制作 点 击 效果 
实战 “ 源 文 件 : 无 罗 


视频 : 视频 \ 应 用 案例 \ 第 9 章 \94.mp4 










案例 分 析 


将 图 片 导 入 图 片 库 ， 是 每 次 运用 Xcode 完成 交互 效果 一 项 必 不 可 少 的 内 容 ， 添 加 “点 击 ”按钮 是 
常见 的 交互 手段 。 本 案例 从 最 基础 、 最 简单 的 这 两 个 功能 着 手 ， 演 示 并 讲解 为 Phone X 制作 一 个 旅游 
APP 宣传 界面 ， 如 何 通过 点 击 隐藏 按钮 进行 跳 转 的 交互 效果 。 读 者 通过 本 案例 ， 可 以 了 解 Xcode 的 使 
用 功能 ， 见 证 神奇 的 交互 效果 ， 并 掌握 一 个 简单 的 交互 效果 的 制作 。 








画板 中 的 导航 条 隐藏 ， 新 建文 件 夹 ， | 









回 Sketch， 打 开 “iPhone X APP 跳 转 








[x aexm 入 并。 区 机 2png。。。 基本 
1 Waaxpng pn 



































| 建 Create a new Xcode project 项 目 ， 
择 Single View APP( 单 视图 应 用 程序 
板 ， 设 置 项 目 名 称 为 “旅游 APP 宣传 页 ” 








了 | 双击 左 侧 列表 的 Assets. xcassets, 打开 文 ， 
| 件 夹 对 话 框 ， 导入 素材 图 片 。 | 
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CChoose options for your new project 


poonere [ER] | | 
ss 


Nasalection 





























择 Appicon 并 右 击 ， 在 弹出 的 快捷 菜 单 
加 | 选择 New Image Set( 新 的 图 像 设置 ) 选 项 。 ; 


ET 


Show in Fnder 
ot aner 









































| 使 用 相同 的 方法 继续 导入 图 片 , 此 处 要 注意 ， | 继续 导入 图 片 ， 单 击 左 仙 列 表 中 的 项 目 名 称 ， 
出 | 还 是 选择 Appicon 并 右 击 ， 在 加 出 的 快捷 菜 [日 | 可 打开 相应 的 图 片 库 。 | 
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和 入 -个 View Controller( 视图 控制 器 ) 控 
件 (简称 VC) 到 画布 中 ， 然 后 将 相同 的 动作 
进行 一 次 ， 使 画布 中 有 3 个 VC 控件 
































| 选择 其 中 一 个 VC 控件 ， 选 择 View Controlle | i 使 用 相同 的 方法 ， 修改 3 个 VC 控件 的 尺寸 
i (视图 控制 器 ) 选项 ， 在 检查 器 面板 中 选择 ; E 1] | 
: Show the Size inspector( 尺子 图 标 ) 选项 ， 
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| 在 Image View 面板 中 打开 图 片 列表 , 在 VC 
| 控件 到 VC 控件 上 ， 调 整 尺寸 覆盖 整个 VC |， 。 | 控件 中 依次 显示 3 个 不 同 的 图 片 。 
| 控件。 将 箭头 指向 第 一 个 VC 控件 ， 代 表 它 . | 


| 控件 库 中 拖 入 一 个 Image View( 图 像 视 
上 
。 ”是 首页 ， 然 后 用 相同 的 方法 在 其 他 两 个 VC | 
b 
上 
上 





件 上 创建 Image View 控件 并 调整 大 小 。 
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在 控件 库 中 找到 Button( 按钮 ) 控件 ， 选 择 
该 控件 并 将 光标 停留 片刻 ，Xcode 将 显示 该 | 
sii 
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将 Button 控件 拖 入 想 要 通 i 
位 置 ， 拖 动 定 界 框 调整 大 小 和 : 






















































FREE MOBILE UI KIT 








9 DO 


Buto 加 :>] Tex 


人 @) 潍 : Sa 区 ) 认 


EE i = 





&] | < 














将 Button 控件 检 
为 一 个 隐藏 按钮 。 


查 器 中 








出 的 菜单 中 选择 Moda 











FREE MOBILE UI KIT 


FREE MOBILE UI KIT 
























|， 。。 | 此 时 两 个 VC 控件 中 出 现 了 链接 线 ， 这 个 链 
; | 中 “接线 在 左 侧 第 二 栏 的 列表 中 也 可 以 找到 , 选 口 |] 
ee 











安 下 鼠标 右键 不 放 ， 拖 入 下 一 
选项 。 






在 左 侧 检查 器 的 Storyboard Segue( 故 对 
续 ) 面板 中 , 打开 Kind 列 表 , 选择 Modal 选 


个 页 面 ， 在 弹 






























A fresh take on 


a concept store 
Le in Auckland 
New Zealand. 


FREE MOBILE UI KIT 





Wbeautitul late 
Renaissance country 




























用 相同 的 方法 ， 设 置 第 
,二 















































2 个 页 面 + 


的 隐藏 







将 该 按钮 连接 到 第 3 个 页 面 ， 在 检 
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Wlbeautiful late 
Renaissance country 

























户 输入 计算 机 的 用 户 名 和 密 
“继续 ”按钮 即 可 。 














































示 模 板 。 单 直 











ee@ee C7] 图 从 旅游 APp 宣 传 页 : ~ Developer Toals Aecess" 和 要 出 另 一个 各， 以 





















2 AppDelegate.swift A vvier 
»| ViewController.swift A olls 


| Main.storyboard 一 h 
模板 运行 后 , 单 击 第 1 


| 到 号 AS 到 品目 | 上 妇 < i | 国 输入 “Developer Tools" 组 中 用 户 的 名 称 和 嘱 码 以 允许 此 次 损 作 。 | 
| Pp | ve eon | ws |]. 
: Y 国旅 小 APP 宣 传 页 vr@venc | 密码 : | 

1 



























个 页 面 中 的 按钮 位 置 ， 
可 以 看 到 其 中转 到 第 2 个 页 面 。 

















跳 转 到 第 3 个 








Image View 控件 不 能 单独 存在 ， 必 须 将 其 放 到 VC 控件 上 ， 读 者 可 以 理解 VC 
控件 为 一 个 画布 。 














本 案例 将 介绍 如 何 导 入 图 片 到 资源 库 ， 并 将 图 片 显示 在 模板 中 ， 通 过 使 用 StoryBoard( 调整 


243@@ 

















移动 互联 网 之 路 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 





其 尺寸 ， 并 为 其 添加 控件 )， 制 作 多 页 面 的 点 击 交互 效果 。 


的 APP 运行 效果 


实战 源 六 人 







j 建 一 个 Xcode 项 目 ， 选 择 一 个 Single ”打开 素材 图 ”文件 夹 ， 这 里 是 从 | 
nm ;View APP( 单 视图 应 用 程序 ) 模板 ， 设 时 页 | Sketch 中 于 的 国 上 将 其 导入 图 片 库 。 


| 目 名 称 为“ 天气 APP"， 单 击 NeM 按钮 。 






































i 在 左 侧 列表 中 选择 Main storyboard( 故 事 
叫 情节 界面 ) 选项 ， 返 回 该 界面 ， 可 以 看 到 
Xcode 已 经 在 画布 中 准备 好 了 一 个 VC 控件 。 






























在 控件 库 中 找到 Navigation Controller( 导 
et 角 控 制 器) 控件 ， 将 其 并 入 画布 中 ， 它 由 两 ， 06: 





删除 名 为 Root View Sw Controller( 根 视图 控制 : | 
器 ) 的 控件 ， 拖 入 一 个 普通 的 VC 控件 。 
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其 尺寸 ， 并 为 其 添加 控件 )， 制 作 多 页 面 的 点 击 交互 效果 。 


的 APP 运行 效果 


实战 源 六 人 







j 建 一 个 Xcode 项 目 ， 选 择 一 个 Single ”打开 素材 图 ”文件 夹 ， 这 里 是 从 | 
nm ;View APP( 单 视图 应 用 程序 ) 模板 ， 设 时 页 | Sketch 中 于 的 国 上 将 其 导入 图 片 库 。 


| 目 名 称 为“ 天气 APP"， 单 击 NeM 按钮 。 






































i 在 左 侧 列表 中 选择 Main storyboard( 故 事 
叫 情节 界面 ) 选项 ， 返 回 该 界面 ， 可 以 看 到 
Xcode 已 经 在 画布 中 准备 好 了 一 个 VC 控件 。 






























在 控件 库 中 找到 Navigation Controller( 导 
et 角 控 制 器) 控件 ， 将 其 并 入 画布 中 ， 它 由 两 ， 06: 





删除 名 为 Root View Sw Controller( 根 视图 控制 : | 
器 ) 的 控件 ， 拖 入 一 个 普通 的 VC 控件 。 
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其 尺寸 ， 并 为 其 添加 控件 )， 制 作 多 页 面 的 点 击 交互 效果 。 


的 APP 运行 效果 


实战 源 六 人 







j 建 一 个 Xcode 项 目 ， 选 择 一 个 Single ”打开 素材 图 ”文件 夹 ， 这 里 是 从 | 
nm ;View APP( 单 视图 应 用 程序 ) 模板 ， 设 时 页 | Sketch 中 于 的 国 上 将 其 导入 图 片 库 。 


| 目 名 称 为“ 天气 APP"， 单 击 NeM 按钮 。 






































i 在 左 侧 列表 中 选择 Main storyboard( 故 事 
叫 情节 界面 ) 选项 ， 返 回 该 界面 ， 可 以 看 到 
Xcode 已 经 在 画布 中 准备 好 了 一 个 VC 控件 。 






























在 控件 库 中 找到 Navigation Controller( 导 
et 角 控 制 器) 控件 ， 将 其 并 入 画布 中 ， 它 由 两 ， 06: 





删除 名 为 Root View Sw Controller( 根 视图 控制 : | 
器 ) 的 控件 ， 拖 入 一 个 普通 的 VC 控件 。 








移动 互联 网 之 路 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 





其 尺寸 ， 并 为 其 添加 控件 )， 制 作 多 页 面 的 点 击 交互 效果 。 


的 APP 运行 效果 


实战 源 六 人 







j 建 一 个 Xcode 项 目 ， 选 择 一 个 Single ”打开 素材 图 ”文件 夹 ， 这 里 是 从 | 
nm ;View APP( 单 视图 应 用 程序 ) 模板 ， 设 时 页 | Sketch 中 于 的 国 上 将 其 导入 图 片 库 。 


| 目 名 称 为“ 天气 APP"， 单 击 NeM 按钮 。 






































i 在 左 侧 列表 中 选择 Main storyboard( 故 事 
叫 情节 界面 ) 选项 ， 返 回 该 界面 ， 可 以 看 到 
Xcode 已 经 在 画布 中 准备 好 了 一 个 VC 控件 。 






























在 控件 库 中 找到 Navigation Controller( 导 
et 角 控 制 器) 控件 ， 将 其 并 入 画布 中 ， 它 由 两 ， 06: 





删除 名 为 Root View Sw Controller( 根 视图 控制 : | 
器 ) 的 控件 ， 拖 入 一 个 普通 的 VC 控件 。 
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使 用 上 一 案例 讲 到 的 方法 ， 插 入 Imag 
[日 ”View( 图 像 视图 ) 控件 ， 并 设置 显示 不 同 的 素 
材 图 片 



































i 

i 

i 

| 

i 

§ 

! 

i 

| i 将 画布 中 的 Navigation Controller( 导航 控 制 i 拖 入 一 个 Button 控件 到 画布 中 ， 调 整 大 小 ( 点 

.上 日“ 器) 第 头 移动 位 置 , 将 Navigation Controler ， 0 击 范围 ) 在 检查 器 中 出 除 Button 字样， 使 其 
| “设置 为 首页 。 | 成 为 一 个 隐藏 按钮 。 | 
! 

1 

上 

上 

4 

上 

! 











i> Navigation Controller 
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选择 隐藏 按钮 ， 按 下 鼠标 右键 ， 拖 动 到 下 一 个 
VC 控件 上 ， 在 弹出 的 快捷 菜单 中 选择 Puch : 
选项 ， 表 示 为 其 设置 关联 的 导航 效果 。 


























四 后 使 用 相同 的 方法 关联 到 另 一 个 VC 控件 ， 
菜单 中 选择 Push 选项 。 


: : 未 来 24 小 时 哺 
i 和 


View Controller 

















出 和 建议 
。 懈 aaa 
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Ta 





风力 单位 






.4 








夜间 自动 更 新 















' 
| 
: 
y : 
温度 | 
i 
i 
i 
i 





互 关联 的 VC 控件 之 间 有 一 条 带 有 特殊 符 
: 号 的 连接 线 代表 两 者 之 间 的 关系 。 ! 

















有 不 区 甘 趟 耻 四 de 
no 











上 | PE 













a pn 
溃 位 》 sp 
风力 单位 》 mm 


| 二 枯 单位 
上 | me 






询 间 自动 更 新 四 





| mm 














网 二 交 虹 


















隐 基 所 并 设置 连接 ， 关联 之 后 的 VC 控 
i 件 会 动 创建 导航 。 






at Controller( 导航 控制 器 ) 下 的 上: 
i Navigation Bar( 导航 栏 ) ， 在 右 侧 检查 器 中 | 
为 其 设置 背影 颜色 , 选择 Style 一 Other 选项 ， 
Colors 对 话 框 中 设置 颜色 值 。 
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| 在 检查 器 中 设置 Text Color( 文本 颜色 ) 和 | ”继续 为 其 他 VC 控件 的 导航 部 分 添加 文字 。 
|| Tint( 返回 按钮 颜色 ) 为 白色 ， 然 后 为 每 -个 旧 ， 
: Navigation Bar 输入 参数 。 











EL 
| 

| 次 
A 
Ey ey 


[ye rm ee em 
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移动 互联 网 之 路 一 一 Sketch+Xcode 移动 UI 与 交互 动 效 设计 从 入 门 到 精通 

















不 要 忘 了 设置 过 的 隐藏 按钮 ，; 
图 标 ， 可 以 跳 转 到 设置 界面 和 地 
击 “ 返 回 ”按钮 可 以 返回 到 首页 。 


可 以 看 到 模拟 器 的 运行 效果 ， 击 首页 的 “未 
口 | ;来 24 小 时 晴 ”， 跳 转 到 第 2 页， 在 第 2 个 DD | 
界面 中 点 击 “ 返 回 ”按钮 ， 则 返回 首页 。 

















下 起 3》 为 什么 在 学 习 Sketch 之 后 要 了 解 Xcode 


Xcode 是 iOS 开发 工程 师 使 用 的 开发 环境 软件 ， 一 个 UI 设计 师 不 能 只 是 作 图 ， 而 是 有 必要 
了 解 软 件 是 如 何 从 无 到 有 地 被 开发 出 来 。 

Xcode 和 Sketch 一 样 只 运行 在 Mac OS 系统 中 , 直到 目前 为 止 , 两 者 都 只 运行 在 这 个 系统 中 。 
Sketch 的 主要 特点 是 效率 高 、 绘 制 快 ， 而 Xcode 对 于 设计 师 来 说 ， 可 以 通过 简易 的 操作 看 到 UI 
设计 后 的 运行 效果 ， 并 不 需要 太 多 的 代码 ， 因 此 非常 适用 。 

在 一 个 开发 团队 中 ，UI 设计 师 和 开发 工程 师 具 有 不 同性 质 的 工作 内 容 ， 但 又 需要 有 紧密 配合 
的 工作 关系 ， 设 计 师 更 多 的 是 去 关注 作品 是 不 是 漂亮 优雅 ， 越 是 对 作品 要 求 高 ， 越 是 需要 为 一 个 
完美 的 作品 做 出 修改 ， 但 并 不 了 解 一 点 点 改动 给 开发 工程 师 带 来 的 麻烦 ， 不 了 解 开发 工程 师 工作 
有 多 复杂 。 所 以 ， 设 计 师 需要 在 交付 给 开发 工程 师 输 出 稿 之 前 提前 看 到 效果 ，Xcode 可 以 帮助 设 
计 师 完成 这 个 愿望 

Xcode 作为 一 款 开发 工具 ， 为 用 户 准备 了 Storyboard 这 种 简单 易 用 的 可 视 化 开发 界面 ， 让 
设计 师 可 以 跳 过 代码 了 解 和 使 用 它 ， 最 重要 的 是 能 通过 使 用 Xcode 看 到 界面 运行 效果 ， 可 以 为 开 
发 工程 师 减 少 很 多 修改 的 麻烦 ， 也 可 以 大 大 提高 工作 效率 和 团队 配合 


本 章 讲解 了 如 何 安 装 并 启动 Xcode 软件 ， 介 绍 了 Xcode 的 界面 和 主要 功能 ， 并 通过 3 个 操 
作 指 南 和 3 个 综合 案例 演示 了 Xcode 的 基本 操作 , 讲解 了 使 用 Xcode 编辑 从 Sketch 导出 的 图 片 ， 
通过 编辑 和 使 用 控件 、 导 入 素材 等 一 系列 操作 ， 最 终 实现 模拟 运行 效果 的 过 程 。 

通过 本 章 的 学 习 ， 用 户 可 以 了 解 APP 开发 的 基本 原理 和 流程 ， 并 能 使 用 Xcode 检测 自己 的 
设计 结果 ， 减 少 工程 师 反复 修改 的 工作 ， 提 高 工作 效率 ， 促 进 开发 团队 的 协作 力度 。 
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